From 95d213453a43d4199ea9660035f80a7a95744cf9 Mon Sep 17 00:00:00 2001
From: timlohse1104 <tim-lohse@gmx.de>
Date: Sat, 14 Mar 2026 11:38:07 +0100
Subject: [PATCH 01/11] =?UTF-8?q?=F0=9F=90=9B=20Fixed=20home=20page=20spac?=
 =?UTF-8?q?ing?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/routes/+page.svelte | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/frontend/src/routes/+page.svelte b/frontend/src/routes/+page.svelte
index 320a6dec..fc09008f 100644
--- a/frontend/src/routes/+page.svelte
+++ b/frontend/src/routes/+page.svelte
@@ -37,7 +37,7 @@
   <meta name={homeRoute.name[locale]} content="tilloh.dev" />
 </svelte:head>
 
-<section class="mt1">
+<section>
   <Navigation routes={Object.values($applicationRoutes)} />
 
   {#if randomJokeToggle}
@@ -54,7 +54,7 @@
     justify-content: center;
     align-items: center;
     max-width: 90vw;
-    margin: 0 auto 3rem auto;
+    margin: var(--default_padding) auto;
     flex: 0.2;
   }
 </style>

From f1be59ae0888c1e54ab1ca8d3cf53a6e012dfa42 Mon Sep 17 00:00:00 2001
From: timlohse1104 <tim-lohse@gmx.de>
Date: Sat, 14 Mar 2026 13:06:45 +0100
Subject: [PATCH 02/11] =?UTF-8?q?=E2=9C=A8=20Add=20toggle=20auto-seed=20on?=
 =?UTF-8?q?=20startup=20and=20filter=20navigation=20routes=20by=20toggle?=
 =?UTF-8?q?=20value.?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 CHANGELOG.md                                  |   1 +
 .../keystore-persistence/src/index.ts         |   2 +
 .../lib/shared-keystore-persistence.module.ts |   3 +-
 .../src/lib/toggle-seed.config.ts             |  23 ++++
 .../src/lib/toggle-seed.service.spec.ts       | 109 ++++++++++++++++++
 .../src/lib/toggle-seed.service.ts            |  51 ++++++++
 .../lib/components/memorandum/Startup.svelte  |   6 -
 .../lib/components/shared/GlobalMenu.svelte   |   4 +-
 frontend/src/lib/config/applications.ts       |   6 +-
 frontend/src/routes/+page.svelte              |   4 +-
 10 files changed, 197 insertions(+), 12 deletions(-)
 create mode 100644 backend/libs/shared/provider/keystore-persistence/src/lib/toggle-seed.config.ts
 create mode 100644 backend/libs/shared/provider/keystore-persistence/src/lib/toggle-seed.service.spec.ts
 create mode 100644 backend/libs/shared/provider/keystore-persistence/src/lib/toggle-seed.service.ts

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 825f1699..5c82b56c 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -8,6 +8,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Added
 
+- [backend] Auto-seed toggles on application startup: missing toggles are created with default values from config; existing toggles are never overwritten.
 - [hitstar] New "Hitstar" music year guessing game: listen to a 30-second preview and guess the release year across 10 rounds.
 - [hitstar] Backend NX library `spotify` with iTunes Search API integration and random track endpoint (`GET /spotify/random-track`).
 - [hitstar] Frontend route `/hitstar` with state machine (MENU → LOADING → GUESSING → REVEAL → RESULTS).
diff --git a/backend/libs/shared/provider/keystore-persistence/src/index.ts b/backend/libs/shared/provider/keystore-persistence/src/index.ts
index 2cb6bab7..2ce60d16 100644
--- a/backend/libs/shared/provider/keystore-persistence/src/index.ts
+++ b/backend/libs/shared/provider/keystore-persistence/src/index.ts
@@ -1,3 +1,5 @@
 export * from './lib/keystore-mongodb.service';
 export * from './lib/schema/keystore.schema';
 export * from './lib/shared-keystore-persistence.module';
+export * from './lib/toggle-seed.config';
+export * from './lib/toggle-seed.service';
diff --git a/backend/libs/shared/provider/keystore-persistence/src/lib/shared-keystore-persistence.module.ts b/backend/libs/shared/provider/keystore-persistence/src/lib/shared-keystore-persistence.module.ts
index 87d43671..c6c094aa 100644
--- a/backend/libs/shared/provider/keystore-persistence/src/lib/shared-keystore-persistence.module.ts
+++ b/backend/libs/shared/provider/keystore-persistence/src/lib/shared-keystore-persistence.module.ts
@@ -2,6 +2,7 @@ import { Module } from '@nestjs/common';
 import { MongooseModule } from '@nestjs/mongoose';
 import { KeystoreMongoDbService } from './keystore-mongodb.service';
 import { Keystore, KeystoreSchema } from './schema/keystore.schema';
+import { ToggleSeedService } from './toggle-seed.service';
 
 @Module({
   imports: [
@@ -10,7 +11,7 @@ import { Keystore, KeystoreSchema } from './schema/keystore.schema';
     ]),
   ],
   controllers: [],
-  providers: [KeystoreMongoDbService],
+  providers: [KeystoreMongoDbService, ToggleSeedService],
   exports: [KeystoreMongoDbService],
 })
 export class SharedKeystorePersistenceModule {}
diff --git a/backend/libs/shared/provider/keystore-persistence/src/lib/toggle-seed.config.ts b/backend/libs/shared/provider/keystore-persistence/src/lib/toggle-seed.config.ts
new file mode 100644
index 00000000..4a04fd12
--- /dev/null
+++ b/backend/libs/shared/provider/keystore-persistence/src/lib/toggle-seed.config.ts
@@ -0,0 +1,23 @@
+export const TOGGLE_IDENTIFIER = 'tilloh-toggles';
+
+export interface ToggleSeedEntry {
+  key: string;
+  defaultValue: string;
+}
+
+export const TOGGLE_SEED_CONFIG: ToggleSeedEntry[] = [
+  { key: 'TOGGLE_RANDOM_JOKE', defaultValue: 'true' },
+  { key: 'TOGGLE_NAV_MEMORANDUM', defaultValue: 'true' },
+  { key: 'TOGGLE_NAV_TODO', defaultValue: 'true' },
+  { key: 'TOGGLE_NAV_FOOD_SCAN', defaultValue: 'true' },
+  { key: 'TOGGLE_NAV_JOKES', defaultValue: 'true' },
+  { key: 'TOGGLE_NAV_CATCH_EM_ALL', defaultValue: 'true' },
+  { key: 'TOGGLE_NAV_UNO_SORT', defaultValue: 'true' },
+  { key: 'TOGGLE_NAV_ABOUT', defaultValue: 'true' },
+  { key: 'TOGGLE_ADMIN_DASHBOARD', defaultValue: 'true' },
+  { key: 'TOGGLE_ADMIN_ACTIVITIES', defaultValue: 'true' },
+  { key: 'TOGGLE_ADMIN_IDENTIFIERS', defaultValue: 'true' },
+  { key: 'TOGGLE_ADMIN_JOKES', defaultValue: 'true' },
+  { key: 'TOGGLE_ADMIN_LINK_PRESETS', defaultValue: 'true' },
+  { key: 'TOGGLE_NAV_HITSTAR', defaultValue: 'true' },
+];
diff --git a/backend/libs/shared/provider/keystore-persistence/src/lib/toggle-seed.service.spec.ts b/backend/libs/shared/provider/keystore-persistence/src/lib/toggle-seed.service.spec.ts
new file mode 100644
index 00000000..19757ced
--- /dev/null
+++ b/backend/libs/shared/provider/keystore-persistence/src/lib/toggle-seed.service.spec.ts
@@ -0,0 +1,109 @@
+import { mockKeystoreDto } from '@backend/util';
+import { Test, TestingModule } from '@nestjs/testing';
+import { KeystoreMongoDbService } from './keystore-mongodb.service';
+import { TOGGLE_IDENTIFIER, TOGGLE_SEED_CONFIG } from './toggle-seed.config';
+import { ToggleSeedService } from './toggle-seed.service';
+
+describe('ToggleSeedService', () => {
+  let service: ToggleSeedService;
+  let keystoreService: jest.Mocked<KeystoreMongoDbService>;
+
+  beforeEach(async () => {
+    const module: TestingModule = await Test.createTestingModule({
+      providers: [
+        ToggleSeedService,
+        {
+          provide: KeystoreMongoDbService,
+          useValue: {
+            findAll: jest.fn(),
+            create: jest.fn(),
+          },
+        },
+      ],
+    }).compile();
+
+    service = module.get<ToggleSeedService>(ToggleSeedService);
+    keystoreService = module.get(KeystoreMongoDbService);
+  });
+
+  afterEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it('should be defined.', () => {
+    expect(service).toBeDefined();
+  });
+
+  describe('onApplicationBootstrap', () => {
+    it('should create all toggles when DB is empty', async () => {
+      // arrange
+      keystoreService.findAll.mockResolvedValue([]);
+      keystoreService.create.mockResolvedValue(
+        mockKeystoreDto({ identifier: TOGGLE_IDENTIFIER }),
+      );
+
+      // act
+      await service.onApplicationBootstrap();
+
+      // assert
+      expect(keystoreService.findAll).toHaveBeenCalledWith({
+        identifier: TOGGLE_IDENTIFIER,
+      });
+      expect(keystoreService.create).toHaveBeenCalledTimes(
+        TOGGLE_SEED_CONFIG.length,
+      );
+    });
+
+    it('should not create any toggles when all already exist', async () => {
+      // arrange
+      const existingToggles = TOGGLE_SEED_CONFIG.map((entry) =>
+        mockKeystoreDto({ identifier: TOGGLE_IDENTIFIER, key: entry.key }),
+      );
+      keystoreService.findAll.mockResolvedValue(existingToggles);
+
+      // act
+      await service.onApplicationBootstrap();
+
+      // assert
+      expect(keystoreService.create).not.toHaveBeenCalled();
+    });
+
+    it('should only create missing toggles when DB is partially populated', async () => {
+      // arrange
+      const existingKeys = TOGGLE_SEED_CONFIG.slice(0, 5);
+      const existingToggles = existingKeys.map((entry) =>
+        mockKeystoreDto({ identifier: TOGGLE_IDENTIFIER, key: entry.key }),
+      );
+      keystoreService.findAll.mockResolvedValue(existingToggles);
+      keystoreService.create.mockResolvedValue(
+        mockKeystoreDto({ identifier: TOGGLE_IDENTIFIER }),
+      );
+
+      // act
+      await service.onApplicationBootstrap();
+
+      // assert
+      expect(keystoreService.create).toHaveBeenCalledTimes(
+        TOGGLE_SEED_CONFIG.length - existingKeys.length,
+      );
+    });
+
+    it('should continue seeding remaining toggles when one create fails', async () => {
+      // arrange
+      keystoreService.findAll.mockResolvedValue([]);
+      keystoreService.create
+        .mockRejectedValueOnce(new Error('create failed'))
+        .mockResolvedValue(
+          mockKeystoreDto({ identifier: TOGGLE_IDENTIFIER }),
+        );
+
+      // act
+      await service.onApplicationBootstrap();
+
+      // assert
+      expect(keystoreService.create).toHaveBeenCalledTimes(
+        TOGGLE_SEED_CONFIG.length,
+      );
+    });
+  });
+});
diff --git a/backend/libs/shared/provider/keystore-persistence/src/lib/toggle-seed.service.ts b/backend/libs/shared/provider/keystore-persistence/src/lib/toggle-seed.service.ts
new file mode 100644
index 00000000..209c7179
--- /dev/null
+++ b/backend/libs/shared/provider/keystore-persistence/src/lib/toggle-seed.service.ts
@@ -0,0 +1,51 @@
+import { Injectable, Logger, OnApplicationBootstrap } from '@nestjs/common';
+import { KeystoreMongoDbService } from './keystore-mongodb.service';
+import {
+  TOGGLE_IDENTIFIER,
+  TOGGLE_SEED_CONFIG,
+} from './toggle-seed.config';
+
+@Injectable()
+export class ToggleSeedService implements OnApplicationBootstrap {
+  private readonly logger = new Logger(ToggleSeedService.name);
+
+  constructor(private readonly keystoreService: KeystoreMongoDbService) {}
+
+  async onApplicationBootstrap(): Promise<void> {
+    this.logger.debug('Starting toggle seed check...');
+
+    const existingToggles = await this.keystoreService.findAll({
+      identifier: TOGGLE_IDENTIFIER,
+    });
+
+    const existingKeys = new Set(existingToggles.map((t) => t.key));
+
+    let created = 0;
+    let alreadyExisted = 0;
+
+    for (const entry of TOGGLE_SEED_CONFIG) {
+      if (existingKeys.has(entry.key)) {
+        alreadyExisted++;
+        continue;
+      }
+
+      try {
+        await this.keystoreService.create(
+          TOGGLE_IDENTIFIER,
+          entry.key,
+          entry.defaultValue,
+        );
+        this.logger.debug(`Toggle created: ${entry.key}=${entry.defaultValue}`);
+        created++;
+      } catch (error) {
+        this.logger.error(
+          `Failed to create toggle ${entry.key}: ${(error as Error).message}`,
+        );
+      }
+    }
+
+    this.logger.log(
+      `Toggle seed complete: ${created} created, ${alreadyExisted} already existed.`,
+    );
+  }
+}
diff --git a/frontend/src/lib/components/memorandum/Startup.svelte b/frontend/src/lib/components/memorandum/Startup.svelte
index dfa1ac9e..821f1e29 100644
--- a/frontend/src/lib/components/memorandum/Startup.svelte
+++ b/frontend/src/lib/components/memorandum/Startup.svelte
@@ -88,12 +88,6 @@
     }
   }
 
-  h3 {
-    margin: 0;
-    font-size: 1.1rem;
-    font-weight: 600;
-  }
-
   p {
     margin: 0;
     font-size: 0.875rem;
diff --git a/frontend/src/lib/components/shared/GlobalMenu.svelte b/frontend/src/lib/components/shared/GlobalMenu.svelte
index ac94e9e2..e8db6567 100644
--- a/frontend/src/lib/components/shared/GlobalMenu.svelte
+++ b/frontend/src/lib/components/shared/GlobalMenu.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { applicationRoutes, utilityRoutes } from '$lib/config/applications';
+  import { activeApplicationRoutes, utilityRoutes } from '$lib/config/applications';
   import { initialized, t } from '$lib/util/translations';
   import Button from 'carbon-components-svelte/src/Button/Button.svelte';
   import Menu from 'carbon-icons-svelte/lib/Menu.svelte';
@@ -8,7 +8,7 @@
 
   let globalMenuObject;
 
-  $: appLinks = Object.values($applicationRoutes).map((route) => ({
+  $: appLinks = $activeApplicationRoutes.map((route) => ({
     id: route.id,
     title: route.name[locale],
     link: route.path,
diff --git a/frontend/src/lib/config/applications.ts b/frontend/src/lib/config/applications.ts
index 9e1de0f2..03fddd90 100644
--- a/frontend/src/lib/config/applications.ts
+++ b/frontend/src/lib/config/applications.ts
@@ -14,7 +14,7 @@ import RadioButtonChecked from 'carbon-icons-svelte/lib/RadioButtonChecked.svelt
 import Restaurant from 'carbon-icons-svelte/lib/Restaurant.svelte';
 import SecurityServices from 'carbon-icons-svelte/lib/SecurityServices.svelte';
 import Settings from 'carbon-icons-svelte/lib/Settings.svelte';
-import { writable } from 'svelte/store';
+import { derived, writable } from 'svelte/store';
 
 export type ApplicationRoutes = {
   home: Route;
@@ -76,6 +76,10 @@ const defaultApplicationRoutes: ApplicationRoutes = {
 
 export const applicationRoutes = writable<ApplicationRoutes>(defaultApplicationRoutes);
 
+export const activeApplicationRoutes = derived(applicationRoutes, ($routes) =>
+  Object.values($routes).filter((route) => route.toggle),
+);
+
 // Load actual toggle values from backend and update store reactively
 loadApplications().then((routes) => applicationRoutes.set(routes));
 
diff --git a/frontend/src/routes/+page.svelte b/frontend/src/routes/+page.svelte
index fc09008f..8f1addc6 100644
--- a/frontend/src/routes/+page.svelte
+++ b/frontend/src/routes/+page.svelte
@@ -2,7 +2,7 @@
   // 1. IMPORTS
   import JokeOfTheDay from '$lib/components/home/JokeOfTheDay.svelte';
   import Navigation from '$lib/components/shared/Navigation.svelte';
-  import { applicationRoutes } from '$lib/config/applications';
+  import { activeApplicationRoutes, applicationRoutes } from '$lib/config/applications';
   import { TogglesEnum } from '$lib/types/toggle.dto';
   import { languageStore } from '$lib/util/stores/store-language';
   import { getToggleValue } from '$lib/util/toggle';
@@ -38,7 +38,7 @@
 </svelte:head>
 
 <section>
-  <Navigation routes={Object.values($applicationRoutes)} />
+  <Navigation routes={$activeApplicationRoutes} />
 
   {#if randomJokeToggle}
     <JokeOfTheDay />

From d40d1a611e90e63f3663399b98b9d2fff04fe694 Mon Sep 17 00:00:00 2001
From: timlohse1104 <tim-lohse@gmx.de>
Date: Sat, 14 Mar 2026 13:58:50 +0100
Subject: [PATCH 03/11] =?UTF-8?q?=E2=9C=A8=20Add=20animated=20icon=20step-?=
 =?UTF-8?q?cards=20tutorial=20to=20Hitstar=20menu=20and=20hide=20best-scor?=
 =?UTF-8?q?e=20tile=20when=20empty.?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 CHANGELOG.md                                  |   6 +
 .../src/lib/components/hitstar/Hitstar.svelte | 108 +++++++++++++++---
 frontend/src/lib/config/de.json               |   9 +-
 frontend/src/lib/config/en.json               |   9 +-
 4 files changed, 113 insertions(+), 19 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 5c82b56c..47ab9a03 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -9,6 +9,12 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ### Added
 
 - [backend] Auto-seed toggles on application startup: missing toggles are created with default values from config; existing toggles are never overwritten.
+- [hitstar] Add animated step-card tutorial in the menu that loops through 5 game steps with icons and auto-highlights each card every 2 seconds.
+
+### Changed
+
+- [hitstar] Hide best-score tile in menu when no score has been recorded yet.
+- [hitstar] Replace static ProgressIndicator with custom icon step-cards (Headphones, Calendar, CheckmarkFilled, Repeat, Trophy) for the game tutorial.
 - [hitstar] New "Hitstar" music year guessing game: listen to a 30-second preview and guess the release year across 10 rounds.
 - [hitstar] Backend NX library `spotify` with iTunes Search API integration and random track endpoint (`GET /spotify/random-track`).
 - [hitstar] Frontend route `/hitstar` with state machine (MENU → LOADING → GUESSING → REVEAL → RESULTS).
diff --git a/frontend/src/lib/components/hitstar/Hitstar.svelte b/frontend/src/lib/components/hitstar/Hitstar.svelte
index 23d7f063..3206fd17 100644
--- a/frontend/src/lib/components/hitstar/Hitstar.svelte
+++ b/frontend/src/lib/components/hitstar/Hitstar.svelte
@@ -17,8 +17,13 @@
   import NumberInput from 'carbon-components-svelte/src/NumberInput/NumberInput.svelte';
   import ProgressBar from 'carbon-components-svelte/src/ProgressBar/ProgressBar.svelte';
   import Tile from 'carbon-components-svelte/src/Tile/Tile.svelte';
+  import Calendar from 'carbon-icons-svelte/lib/Calendar.svelte';
+  import CheckmarkFilled from 'carbon-icons-svelte/lib/CheckmarkFilled.svelte';
   import ContinueFilled from 'carbon-icons-svelte/lib/ContinueFilled.svelte';
   import Exit from 'carbon-icons-svelte/lib/Exit.svelte';
+  import Headphones from 'carbon-icons-svelte/lib/Headphones.svelte';
+  import Repeat from 'carbon-icons-svelte/lib/Repeat.svelte';
+  import Trophy from 'carbon-icons-svelte/lib/Trophy.svelte';
   import { onMount } from 'svelte';
   import HitstarCard from './HitstarCard.svelte';
 
@@ -26,6 +31,14 @@
   type GameState = 'MENU' | 'LOADING' | 'GUESSING' | 'REVEAL' | 'RESULTS';
   const TOTAL_ROUNDS = 10;
   const roundIndices = Array(TOTAL_ROUNDS).fill(0);
+  const STEP_COUNT = 5;
+  const STEPS = [
+    { icon: Headphones },
+    { icon: Calendar },
+    { icon: CheckmarkFilled },
+    { icon: Repeat },
+    { icon: Trophy },
+  ];
 
   // 4. STATE
   let gameState = $state<GameState>('MENU');
@@ -38,6 +51,15 @@
   let isCardFlipped = $state(false);
   let errorMessage = $state('');
   let isShaking = $state(false);
+  let currentStepIndex = $state(0);
+
+  // 6. EFFECTS
+  $effect(() => {
+    const interval = setInterval(() => {
+      currentStepIndex = (currentStepIndex + 1) % STEP_COUNT;
+    }, 2000);
+    return () => clearInterval(interval);
+  });
 
   // 5. DERIVED
   const bestRound = $derived($hitstarBestRoundStore);
@@ -171,19 +193,29 @@
         <h1 class="headline">{$t('page.hitstar.menu.headline')}</h1>
         <p class="description">{$t('page.hitstar.menu.description')}</p>
 
-        <Tile class="best-score-tile">
-          <p class="best-score-label">{$t('page.hitstar.menu.bestScore')}</p>
-          {#if bestRound}
+        <div class="step-cards">
+          {#each STEPS as step, i}
+            {@const StepIcon = step.icon}
+            <div class="step-card" class:active={i === currentStepIndex}>
+              <StepIcon size={24} />
+              <span class="step-label"
+                >{$t(`page.hitstar.menu.step${i + 1}`)}</span
+              >
+            </div>
+          {/each}
+        </div>
+
+        {#if bestRound}
+          <Tile class="best-score-tile">
+            <p class="best-score-label">{$t('page.hitstar.menu.bestScore')}</p>
             <p class="best-score-value">
               {$t('page.hitstar.menu.bestScoreValue', {
                 score: String(bestRound.score),
                 date: bestRound.date,
               })}
             </p>
-          {:else}
-            <p class="best-score-empty">{$t('page.hitstar.menu.noScore')}</p>
-          {/if}
-        </Tile>
+          </Tile>
+        {/if}
 
         {#if errorMessage}
           <InlineNotification
@@ -249,7 +281,7 @@
 
         <!-- MIDDLE: Card + Audio (centered vertically) -->
         <div class="game-middle-section">
-          <HitstarCard flipped={false} track={null} />
+          <HitstarCard flipped={false} track={null} correct={false} />
           {#if currentTrack?.previewUrl}
             <audio
               controls
@@ -318,7 +350,11 @@
         <!-- MIDDLE: Card + Audio (centered vertically) -->
         <div class="game-middle-section">
           <div class:shake={isShaking}>
-            <HitstarCard flipped={isCardFlipped} track={currentTrack} correct={isCorrect} />
+            <HitstarCard
+              flipped={isCardFlipped}
+              track={currentTrack}
+              correct={isCorrect}
+            />
           </div>
 
           {#if currentTrack?.previewUrl}
@@ -563,6 +599,53 @@
     position: static;
   }
 
+  /* ── Step cards ───────────────────────────────────────── */
+  .step-cards {
+    display: flex;
+    gap: 0.5rem;
+    width: 100%;
+    max-width: 520px;
+    justify-content: center;
+  }
+
+  .step-card {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 0.25rem;
+    padding: 0.75rem 0.25rem;
+    border-radius: 6px;
+    border: 2px solid var(--cds-border-subtle-01, #525252);
+    background: var(--cds-layer-02, #393939);
+    flex: 1;
+    min-width: 0;
+    transition:
+      border-color 0.3s,
+      background 0.3s,
+      transform 0.3s,
+      opacity 0.3s;
+    opacity: 0.45;
+  }
+
+  .step-card.active {
+    border-color: var(--cds-interactive, #0f62fe);
+    background: var(--cds-layer-selected-01, #4c4c4c);
+    opacity: 1;
+    transform: scale(1.1);
+  }
+
+  .step-label {
+    font-size: 0.7rem;
+    text-align: center;
+    color: var(--cds-text-secondary);
+    line-height: 1.2;
+  }
+
+  .step-card.active .step-label {
+    color: var(--cds-text-primary);
+    font-weight: 500;
+  }
+
   /* ── Menu styles ──────────────────────────────────────── */
   .headline {
     font-size: 2rem;
@@ -584,17 +667,12 @@
     margin: 0 0 0.3rem;
   }
 
-  .best-score-value,
-  .best-score-empty {
+  .best-score-value {
     font-size: 1.1rem;
     font-weight: bold;
     margin: 0;
   }
 
-  .best-score-empty {
-    color: var(--cds-text-secondary);
-  }
-
   /* ── Audio ────────────────────────────────────────────── */
   .audio-player {
     width: 100%;
diff --git a/frontend/src/lib/config/de.json b/frontend/src/lib/config/de.json
index 03123c91..7fedc727 100644
--- a/frontend/src/lib/config/de.json
+++ b/frontend/src/lib/config/de.json
@@ -306,7 +306,7 @@
   "page.shared.searchEmoji": "Emoji suchen...",
   "page.shared.noEmojisFound": "Keine Emojis gefunden",
   "page.hitstar.title": "Hitstar",
-  "page.hitstar.menu.headline": "Hitstar – Musik-Ratespiel",
+  "page.hitstar.menu.headline": "Das Musik-Ratespiel",
   "page.hitstar.menu.description": "Kannst du das Erscheinungsjahr eines zufälligen Songs erraten? Du hast 10 Runden – viel Erfolg!",
   "page.hitstar.menu.bestScore": "Beste Wertung",
   "page.hitstar.menu.bestScoreValue": "{{score}} / 10 am {{date}}",
@@ -336,5 +336,10 @@
   "page.hitstar.results.yourGuess": "Deine Antwort: {{year}}",
   "page.hitstar.results.correctYear": "Richtiges Jahr: {{year}}",
   "page.hitstar.results.playAgain": "Nochmal spielen",
-  "page.hitstar.abort": "Spiel abbrechen"
+  "page.hitstar.abort": "Spiel abbrechen",
+  "page.hitstar.menu.step1": "Song hören",
+  "page.hitstar.menu.step2": "Jahr raten",
+  "page.hitstar.menu.step3": "Aufdecken",
+  "page.hitstar.menu.step4": "10 Runden",
+  "page.hitstar.menu.step5": "Wertung"
 }
\ No newline at end of file
diff --git a/frontend/src/lib/config/en.json b/frontend/src/lib/config/en.json
index ecf7289c..38e8ad53 100644
--- a/frontend/src/lib/config/en.json
+++ b/frontend/src/lib/config/en.json
@@ -306,7 +306,7 @@
   "page.shared.searchEmoji": "Search emoji...",
   "page.shared.noEmojisFound": "No emojis found",
   "page.hitstar.title": "Hitstar",
-  "page.hitstar.menu.headline": "Hitstar – Music Year Game",
+  "page.hitstar.menu.headline": "The music guessing game",
   "page.hitstar.menu.description": "Can you guess the release year of a random song? You have 10 rounds – good luck!",
   "page.hitstar.menu.bestScore": "Best score",
   "page.hitstar.menu.bestScoreValue": "{{score}} / 10 on {{date}}",
@@ -336,5 +336,10 @@
   "page.hitstar.results.yourGuess": "Your guess: {{year}}",
   "page.hitstar.results.correctYear": "Correct year: {{year}}",
   "page.hitstar.results.playAgain": "Play again",
-  "page.hitstar.abort": "Abort game"
+  "page.hitstar.abort": "Abort game",
+  "page.hitstar.menu.step1": "Listen",
+  "page.hitstar.menu.step2": "Guess",
+  "page.hitstar.menu.step3": "Reveal",
+  "page.hitstar.menu.step4": "10 Rounds",
+  "page.hitstar.menu.step5": "Score"
 }
\ No newline at end of file

From a6e78bb02d64b1eafddc23d4e9851bcc1489adb3 Mon Sep 17 00:00:00 2001
From: timlohse1104 <tim-lohse@gmx.de>
Date: Sat, 14 Mar 2026 15:31:40 +0100
Subject: [PATCH 04/11] =?UTF-8?q?=F0=9F=9A=80=20Use=20Carbon=20Tabs=20for?=
 =?UTF-8?q?=20Hitstar=20mode=20switching=20and=20rename=20backend=20lib=20?=
 =?UTF-8?q?spotify=20to=20hitstar?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 CHANGELOG.md                                  |   6 +-
 backend/apps/tilloh-dev/src/main.ts           |   4 +-
 .../libs/{spotify => hitstar}/.eslintrc.json  |   0
 .../libs/{spotify => hitstar}/jest.config.ts  |   4 +-
 .../libs/{spotify => hitstar}/project.json    |   6 +-
 backend/libs/hitstar/src/index.ts             |   2 +
 .../src/lib/hitstar.controller.spec.ts}       |  18 +-
 .../src/lib/hitstar.controller.ts}            |  12 +-
 .../libs/hitstar/src/lib/hitstar.module.ts    |  13 +
 .../src/lib/hitstar.service.spec.ts}          |  10 +-
 .../src/lib/hitstar.service.ts}               |  54 +-
 .../libs/{spotify => hitstar}/tsconfig.json   |   0
 .../{spotify => hitstar}/tsconfig.lib.json    |   0
 .../{spotify => hitstar}/tsconfig.spec.json   |   0
 backend/libs/spotify/src/index.ts             |   2 -
 .../libs/spotify/src/lib/spotify.module.ts    |  13 -
 backend/tsconfig.base.json                    |   2 +-
 frontend/src/lib/api/spotify.api.ts           |   2 +-
 .../src/lib/components/hitstar/Hitstar.svelte | 811 +-----------------
 .../components/hitstar/HitstarClassic.svelte  | 498 +++++++++++
 .../hitstar/HitstarGameTopBar.svelte          |  48 ++
 .../hitstar/HitstarLoadingScreen.svelte       |  22 +
 .../components/hitstar/HitstarRange.svelte    | 585 +++++++++++++
 .../hitstar/HitstarResultsScreen.svelte       | 186 ++++
 .../hitstar/HitstarRoundTracker.svelte        |  55 ++
 .../hitstar/HitstarSpotifyEmbed.svelte        |  67 ++
 frontend/src/lib/config/de.json               |  16 +-
 frontend/src/lib/config/en.json               |  16 +-
 frontend/src/lib/types/spotify.dto.ts         |   3 +
 frontend/src/lib/util/stores/store-hitstar.ts |  72 +-
 frontend/src/lib/util/translations.ts         |   3 +
 31 files changed, 1678 insertions(+), 852 deletions(-)
 rename backend/libs/{spotify => hitstar}/.eslintrc.json (100%)
 rename backend/libs/{spotify => hitstar}/jest.config.ts (76%)
 rename backend/libs/{spotify => hitstar}/project.json (78%)
 create mode 100644 backend/libs/hitstar/src/index.ts
 rename backend/libs/{spotify/src/lib/spotify.controller.spec.ts => hitstar/src/lib/hitstar.controller.spec.ts} (69%)
 rename backend/libs/{spotify/src/lib/spotify.controller.ts => hitstar/src/lib/hitstar.controller.ts} (67%)
 create mode 100644 backend/libs/hitstar/src/lib/hitstar.module.ts
 rename backend/libs/{spotify/src/lib/spotify.service.spec.ts => hitstar/src/lib/hitstar.service.spec.ts} (93%)
 rename backend/libs/{spotify/src/lib/spotify.service.ts => hitstar/src/lib/hitstar.service.ts} (60%)
 rename backend/libs/{spotify => hitstar}/tsconfig.json (100%)
 rename backend/libs/{spotify => hitstar}/tsconfig.lib.json (100%)
 rename backend/libs/{spotify => hitstar}/tsconfig.spec.json (100%)
 delete mode 100644 backend/libs/spotify/src/index.ts
 delete mode 100644 backend/libs/spotify/src/lib/spotify.module.ts
 create mode 100644 frontend/src/lib/components/hitstar/HitstarClassic.svelte
 create mode 100644 frontend/src/lib/components/hitstar/HitstarGameTopBar.svelte
 create mode 100644 frontend/src/lib/components/hitstar/HitstarLoadingScreen.svelte
 create mode 100644 frontend/src/lib/components/hitstar/HitstarRange.svelte
 create mode 100644 frontend/src/lib/components/hitstar/HitstarResultsScreen.svelte
 create mode 100644 frontend/src/lib/components/hitstar/HitstarRoundTracker.svelte
 create mode 100644 frontend/src/lib/components/hitstar/HitstarSpotifyEmbed.svelte

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 47ab9a03..aa26d4d8 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -10,13 +10,17 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 - [backend] Auto-seed toggles on application startup: missing toggles are created with default values from config; existing toggles are never overwritten.
 - [hitstar] Add animated step-card tutorial in the menu that loops through 5 game steps with icons and auto-highlights each card every 2 seconds.
+- [hitstar] Multi-mode architecture with Carbon Tabs (horizontal, no dropdown) for mode selection on the Hitstar start page.
+- [hitstar] New "Range" game mode: set a 1–5 year range instead of guessing exactly; narrower ranges earn more points (max 50).
 
 ### Changed
 
+- [hitstar] Refactored Hitstar into shell + separate mode components (HitstarClassic, HitstarRange) with shared sub-components (HitstarRoundTracker, HitstarGameTopBar, HitstarLoadingScreen, HitstarResultsScreen).
+- [hitstar] Refactored localStorage keys to mode-specific pattern (hitstar.classic.*, hitstar.range.*) with automatic migration of existing data.
 - [hitstar] Hide best-score tile in menu when no score has been recorded yet.
 - [hitstar] Replace static ProgressIndicator with custom icon step-cards (Headphones, Calendar, CheckmarkFilled, Repeat, Trophy) for the game tutorial.
 - [hitstar] New "Hitstar" music year guessing game: listen to a 30-second preview and guess the release year across 10 rounds.
-- [hitstar] Backend NX library `spotify` with iTunes Search API integration and random track endpoint (`GET /spotify/random-track`).
+- [hitstar] Renamed backend NX library `spotify` to `hitstar`; endpoint changed from `GET /spotify/random-track` to `GET /hitstar/random-track`.
 - [hitstar] Frontend route `/hitstar` with state machine (MENU → LOADING → GUESSING → REVEAL → RESULTS).
 - [hitstar] Audio preview plays automatically in GUESSING state via iTunes preview URL.
 - [hitstar] CSS 3D flip card animation on answer reveal, confetti for correct guesses, shake animation for wrong answers.
diff --git a/backend/apps/tilloh-dev/src/main.ts b/backend/apps/tilloh-dev/src/main.ts
index 5f56ddf5..5e096c0c 100644
--- a/backend/apps/tilloh-dev/src/main.ts
+++ b/backend/apps/tilloh-dev/src/main.ts
@@ -1,6 +1,6 @@
 import { AdminModule } from '@backend/admin';
 import { JokesModule } from '@backend/jokes';
-import { SpotifyModule } from '@backend/spotify';
+import { HitstarModule } from '@backend/hitstar';
 import { MemorandumModule } from '@backend/memorandum';
 import { OcrModule } from '@backend/ocr';
 import { SharedControllerHealthModule } from '@backend/shared-controller-health';
@@ -72,7 +72,7 @@ import { EnvironmentVariables, validate } from './env.validation';
     MemorandumModule,
     JokesModule,
     OcrModule,
-    SpotifyModule,
+    HitstarModule,
     TodoControllerModule,
   ],
   providers: [
diff --git a/backend/libs/spotify/.eslintrc.json b/backend/libs/hitstar/.eslintrc.json
similarity index 100%
rename from backend/libs/spotify/.eslintrc.json
rename to backend/libs/hitstar/.eslintrc.json
diff --git a/backend/libs/spotify/jest.config.ts b/backend/libs/hitstar/jest.config.ts
similarity index 76%
rename from backend/libs/spotify/jest.config.ts
rename to backend/libs/hitstar/jest.config.ts
index 22344168..4f8f0f24 100644
--- a/backend/libs/spotify/jest.config.ts
+++ b/backend/libs/hitstar/jest.config.ts
@@ -1,11 +1,11 @@
 /* eslint-disable */
 export default {
-  displayName: 'spotify',
+  displayName: 'hitstar',
   preset: '../../jest.preset.js',
   testEnvironment: 'node',
   transform: {
     '^.+\\.[tj]s$': ['ts-jest', { tsconfig: '<rootDir>/tsconfig.spec.json' }],
   },
   moduleFileExtensions: ['ts', 'js', 'html'],
-  coverageDirectory: '../../coverage/libs/spotify',
+  coverageDirectory: '../../coverage/libs/hitstar',
 };
diff --git a/backend/libs/spotify/project.json b/backend/libs/hitstar/project.json
similarity index 78%
rename from backend/libs/spotify/project.json
rename to backend/libs/hitstar/project.json
index d0da463f..23235490 100644
--- a/backend/libs/spotify/project.json
+++ b/backend/libs/hitstar/project.json
@@ -1,7 +1,7 @@
 {
-  "name": "spotify",
+  "name": "hitstar",
   "$schema": "../../node_modules/nx/schemas/project-schema.json",
-  "sourceRoot": "libs/spotify/src",
+  "sourceRoot": "libs/hitstar/src",
   "projectType": "library",
   "tags": [],
   "targets": {
@@ -17,7 +17,7 @@
         "{workspaceRoot}/coverage/{projectRoot}"
       ],
       "options": {
-        "jestConfig": "libs/spotify/jest.config.ts"
+        "jestConfig": "libs/hitstar/jest.config.ts"
       }
     }
   }
diff --git a/backend/libs/hitstar/src/index.ts b/backend/libs/hitstar/src/index.ts
new file mode 100644
index 00000000..52e1eed4
--- /dev/null
+++ b/backend/libs/hitstar/src/index.ts
@@ -0,0 +1,2 @@
+export * from './lib/hitstar.controller';
+export * from './lib/hitstar.module';
diff --git a/backend/libs/spotify/src/lib/spotify.controller.spec.ts b/backend/libs/hitstar/src/lib/hitstar.controller.spec.ts
similarity index 69%
rename from backend/libs/spotify/src/lib/spotify.controller.spec.ts
rename to backend/libs/hitstar/src/lib/hitstar.controller.spec.ts
index 0873a941..241ac8b2 100644
--- a/backend/libs/spotify/src/lib/spotify.controller.spec.ts
+++ b/backend/libs/hitstar/src/lib/hitstar.controller.spec.ts
@@ -1,6 +1,6 @@
 import { Test, TestingModule } from '@nestjs/testing';
-import { SpotifyController } from './spotify.controller';
-import { SpotifyService } from './spotify.service';
+import { HitstarController } from './hitstar.controller';
+import { HitstarService } from './hitstar.service';
 
 const mockTrack = {
   id: 'track-id-1',
@@ -13,16 +13,16 @@ const mockTrack = {
   previewUrl: 'https://p.scdn.co/mp3-preview/abc123',
 };
 
-describe('SpotifyController', () => {
-  let controller: SpotifyController;
-  let service: SpotifyService;
+describe('HitstarController', () => {
+  let controller: HitstarController;
+  let service: HitstarService;
 
   beforeEach(async () => {
     const module: TestingModule = await Test.createTestingModule({
-      controllers: [SpotifyController],
+      controllers: [HitstarController],
       providers: [
         {
-          provide: SpotifyService,
+          provide: HitstarService,
           useValue: {
             getRandomTrack: jest.fn().mockResolvedValue(mockTrack),
           },
@@ -30,8 +30,8 @@ describe('SpotifyController', () => {
       ],
     }).compile();
 
-    controller = module.get<SpotifyController>(SpotifyController);
-    service = module.get<SpotifyService>(SpotifyService);
+    controller = module.get<HitstarController>(HitstarController);
+    service = module.get<HitstarService>(HitstarService);
   });
 
   it('should be defined', () => {
diff --git a/backend/libs/spotify/src/lib/spotify.controller.ts b/backend/libs/hitstar/src/lib/hitstar.controller.ts
similarity index 67%
rename from backend/libs/spotify/src/lib/spotify.controller.ts
rename to backend/libs/hitstar/src/lib/hitstar.controller.ts
index b19795f3..811aab77 100644
--- a/backend/libs/spotify/src/lib/spotify.controller.ts
+++ b/backend/libs/hitstar/src/lib/hitstar.controller.ts
@@ -6,12 +6,12 @@ import {
   ApiOkResponse,
   ApiTags,
 } from '@nestjs/swagger';
-import { SpotifyService } from './spotify.service';
+import { HitstarService } from './hitstar.service';
 
-@ApiTags('spotify')
-@Controller('/spotify')
-export class SpotifyController {
-  constructor(private spotifyService: SpotifyService) {}
+@ApiTags('hitstar')
+@Controller('/hitstar')
+export class HitstarController {
+  constructor(private hitstarService: HitstarService) {}
 
   @Public()
   @ApiOkResponse({
@@ -21,6 +21,6 @@ export class SpotifyController {
   @ApiBadRequestResponse({ description: 'Bad or malformed request.' })
   @Get('/random-track')
   getRandomTrack() {
-    return this.spotifyService.getRandomTrack();
+    return this.hitstarService.getRandomTrack();
   }
 }
diff --git a/backend/libs/hitstar/src/lib/hitstar.module.ts b/backend/libs/hitstar/src/lib/hitstar.module.ts
new file mode 100644
index 00000000..2773713e
--- /dev/null
+++ b/backend/libs/hitstar/src/lib/hitstar.module.ts
@@ -0,0 +1,13 @@
+import { HttpModule } from '@nestjs/axios';
+import { Module } from '@nestjs/common';
+import { ConfigModule } from '@nestjs/config';
+import { HitstarController } from './hitstar.controller';
+import { HitstarService } from './hitstar.service';
+
+@Module({
+  imports: [HttpModule, ConfigModule],
+  controllers: [HitstarController],
+  providers: [HitstarService],
+  exports: [],
+})
+export class HitstarModule {}
diff --git a/backend/libs/spotify/src/lib/spotify.service.spec.ts b/backend/libs/hitstar/src/lib/hitstar.service.spec.ts
similarity index 93%
rename from backend/libs/spotify/src/lib/spotify.service.spec.ts
rename to backend/libs/hitstar/src/lib/hitstar.service.spec.ts
index a56a9ffc..11be09d1 100644
--- a/backend/libs/spotify/src/lib/spotify.service.spec.ts
+++ b/backend/libs/hitstar/src/lib/hitstar.service.spec.ts
@@ -2,7 +2,7 @@ import { HttpService } from '@nestjs/axios';
 import { ConfigService } from '@nestjs/config';
 import { Test, TestingModule } from '@nestjs/testing';
 import { of } from 'rxjs';
-import { SpotifyService } from './spotify.service';
+import { HitstarService } from './hitstar.service';
 
 const mockTokenResponse = {
   data: {
@@ -32,14 +32,14 @@ const mockSpotifyResponse = {
   },
 };
 
-describe('SpotifyService', () => {
-  let service: SpotifyService;
+describe('HitstarService', () => {
+  let service: HitstarService;
   let httpService: HttpService;
 
   beforeEach(async () => {
     const module: TestingModule = await Test.createTestingModule({
       providers: [
-        SpotifyService,
+        HitstarService,
         {
           provide: HttpService,
           useValue: { get: jest.fn(), post: jest.fn() },
@@ -51,7 +51,7 @@ describe('SpotifyService', () => {
       ],
     }).compile();
 
-    service = module.get<SpotifyService>(SpotifyService);
+    service = module.get<HitstarService>(HitstarService);
     httpService = module.get<HttpService>(HttpService);
   });
 
diff --git a/backend/libs/spotify/src/lib/spotify.service.ts b/backend/libs/hitstar/src/lib/hitstar.service.ts
similarity index 60%
rename from backend/libs/spotify/src/lib/spotify.service.ts
rename to backend/libs/hitstar/src/lib/hitstar.service.ts
index d38faa03..90c9a2e0 100644
--- a/backend/libs/spotify/src/lib/spotify.service.ts
+++ b/backend/libs/hitstar/src/lib/hitstar.service.ts
@@ -5,8 +5,8 @@ import { ConfigService } from '@nestjs/config';
 import { firstValueFrom } from 'rxjs';
 
 @Injectable()
-export class SpotifyService {
-  private readonly logger = new Logger(SpotifyService.name);
+export class HitstarService {
+  private readonly logger = new Logger(HitstarService.name);
   private accessToken: string | null = null;
   private tokenExpiresAt = 0;
 
@@ -21,8 +21,12 @@ export class SpotifyService {
     }
 
     const clientId = this.configService.get<string>('SPOTIFY_CLIENT_ID');
-    const clientSecret = this.configService.get<string>('SPOTIFY_CLIENT_SECRET');
-    const credentials = Buffer.from(`${clientId}:${clientSecret}`).toString('base64');
+    const clientSecret = this.configService.get<string>(
+      'SPOTIFY_CLIENT_SECRET',
+    );
+    const credentials = Buffer.from(`${clientId}:${clientSecret}`).toString(
+      'base64',
+    );
 
     const response = await firstValueFrom(
       this.httpService.post(
@@ -38,7 +42,8 @@ export class SpotifyService {
     );
 
     this.accessToken = response.data.access_token as string;
-    this.tokenExpiresAt = Date.now() + (response.data.expires_in as number) * 1000;
+    this.tokenExpiresAt =
+      Date.now() + (response.data.expires_in as number) * 1000;
     return this.accessToken;
   }
 
@@ -46,13 +51,16 @@ export class SpotifyService {
     const maxAttempts = 10;
 
     for (let attempt = 0; attempt < maxAttempts; attempt++) {
-      const offset = Math.floor(Math.random() * 50);
+      const offset = Math.floor(Math.random() * 950);
       const token = await this.getAccessToken();
 
-      this.logger.log(`Attempt ${attempt + 1}: searching Spotify (offset=${offset})`);
+      this.logger.log(
+        `Attempt ${attempt + 1}: searching Spotify (offset=${offset})`,
+      );
 
       try {
-        const searchUrl = `https://api.spotify.com/v1/search?q=*+year%3A1950-2025&type=track&market=DE&limit=1&offset=${offset}`;
+        const searchUrl = `https://api.spotify.com/v1/search?q=*+year%3A1950-2025&type=track&market=DE&limit=10&offset=${offset}`;
+        this.logger.log(`Fetching URL: ${searchUrl}`);
         const response = await firstValueFrom(
           this.httpService.get(searchUrl, {
             headers: { Authorization: `Bearer ${token}` },
@@ -61,10 +69,15 @@ export class SpotifyService {
 
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
         const items: any[] = response.data?.tracks?.items ?? [];
-        const validTracks = items.filter((t) => t.preview_url && t.album?.release_date);
+        const validTracks = items.filter((t) => t.album?.release_date);
+
+        this.logger.log(
+          `Attempt ${attempt + 1}: ${items.length} tracks fetched, ${validTracks.length} usable`,
+        );
 
         if (validTracks.length > 0) {
-          const track = validTracks[0];
+          const track =
+            validTracks[Math.floor(Math.random() * validTracks.length)];
           const releaseYear = parseInt(
             (track.album.release_date as string).substring(0, 4),
             10,
@@ -74,7 +87,9 @@ export class SpotifyService {
             .map((a) => a.name)
             .join(', ');
 
-          this.logger.log(`Found: "${track.name as string}" by ${artist} (${releaseYear})`);
+          this.logger.log(
+            `Found: "${track.name as string}" by ${artist} (${releaseYear})`,
+          );
 
           return {
             id: track.id as string,
@@ -88,12 +103,21 @@ export class SpotifyService {
           };
         }
 
-        this.logger.warn(`Attempt ${attempt + 1}: no usable track found, retrying.`);
-      } catch (err) {
-        this.logger.warn(`Attempt ${attempt + 1} failed: ${err}`);
+        this.logger.warn(
+          `Attempt ${attempt + 1}: no usable track found. HTTP ${response.status}, response: ${JSON.stringify(response.data)}`,
+        );
+      } catch (err: unknown) {
+        const status = (err as { response?: { status?: number } })?.response
+          ?.status;
+        const data = (err as { response?: { data?: unknown } })?.response?.data;
+        this.logger.warn(
+          `Attempt ${attempt + 1} failed. HTTP ${status ?? 'n/a'}, response: ${JSON.stringify(data ?? err)}`,
+        );
       }
     }
 
-    throw new Error(`Could not find a random track after ${maxAttempts} attempts.`);
+    throw new Error(
+      `Could not find a random track after ${maxAttempts} attempts.`,
+    );
   }
 }
diff --git a/backend/libs/spotify/tsconfig.json b/backend/libs/hitstar/tsconfig.json
similarity index 100%
rename from backend/libs/spotify/tsconfig.json
rename to backend/libs/hitstar/tsconfig.json
diff --git a/backend/libs/spotify/tsconfig.lib.json b/backend/libs/hitstar/tsconfig.lib.json
similarity index 100%
rename from backend/libs/spotify/tsconfig.lib.json
rename to backend/libs/hitstar/tsconfig.lib.json
diff --git a/backend/libs/spotify/tsconfig.spec.json b/backend/libs/hitstar/tsconfig.spec.json
similarity index 100%
rename from backend/libs/spotify/tsconfig.spec.json
rename to backend/libs/hitstar/tsconfig.spec.json
diff --git a/backend/libs/spotify/src/index.ts b/backend/libs/spotify/src/index.ts
deleted file mode 100644
index 096a05e8..00000000
--- a/backend/libs/spotify/src/index.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-export * from './lib/spotify.controller';
-export * from './lib/spotify.module';
diff --git a/backend/libs/spotify/src/lib/spotify.module.ts b/backend/libs/spotify/src/lib/spotify.module.ts
deleted file mode 100644
index 992daae1..00000000
--- a/backend/libs/spotify/src/lib/spotify.module.ts
+++ /dev/null
@@ -1,13 +0,0 @@
-import { HttpModule } from '@nestjs/axios';
-import { Module } from '@nestjs/common';
-import { ConfigModule } from '@nestjs/config';
-import { SpotifyController } from './spotify.controller';
-import { SpotifyService } from './spotify.service';
-
-@Module({
-  imports: [HttpModule, ConfigModule],
-  controllers: [SpotifyController],
-  providers: [SpotifyService],
-  exports: [],
-})
-export class SpotifyModule {}
diff --git a/backend/tsconfig.base.json b/backend/tsconfig.base.json
index 38ea8d32..6d8d5b50 100644
--- a/backend/tsconfig.base.json
+++ b/backend/tsconfig.base.json
@@ -44,7 +44,7 @@
       "@backend/shared-identifiers": [
         "libs/shared/provider/identifiers/src/index.ts"
       ],
-      "@backend/spotify": ["libs/spotify/src/index.ts"]
+      "@backend/hitstar": ["libs/hitstar/src/index.ts"]
     }
   },
   "exclude": ["node_modules", "tmp"]
diff --git a/frontend/src/lib/api/spotify.api.ts b/frontend/src/lib/api/spotify.api.ts
index ef020d28..ac802a14 100644
--- a/frontend/src/lib/api/spotify.api.ts
+++ b/frontend/src/lib/api/spotify.api.ts
@@ -2,7 +2,7 @@ import type { SpotifyTrackDto } from '$lib/types/spotify.dto';
 import { getApiURL } from '$lib/util/environment';
 
 export const getRandomTrack = async (): Promise<SpotifyTrackDto> => {
-  const res = await fetch(`${getApiURL()}/spotify/random-track`);
+  const res = await fetch(`${getApiURL()}/hitstar/random-track`);
   if (!res.ok) {
     const err = await res.json().catch(() => ({}));
     throw new Error(err?.message ?? `HTTP ${res.status}`);
diff --git a/frontend/src/lib/components/hitstar/Hitstar.svelte b/frontend/src/lib/components/hitstar/Hitstar.svelte
index 3206fd17..1aeeaab1 100644
--- a/frontend/src/lib/components/hitstar/Hitstar.svelte
+++ b/frontend/src/lib/components/hitstar/Hitstar.svelte
@@ -1,444 +1,37 @@
 <script lang="ts">
   // 1. IMPORTS
-  import { getRandomTrack } from '$lib/api/spotify.api';
-  import type {
-    HitstarBestRound,
-    HitstarRoundResult,
-    SpotifyTrackDto,
-  } from '$lib/types/spotify.dto';
-  import {
-    hitstarBestRoundStore,
-    hitstarGameStateStore,
-  } from '$lib/util/stores/store-hitstar';
-  import { celebrate } from '$lib/util/stores/stores-global';
   import { initialized, t } from '$lib/util/translations';
-  import Button from 'carbon-components-svelte/src/Button/Button.svelte';
-  import InlineNotification from 'carbon-components-svelte/src/Notification/InlineNotification.svelte';
-  import NumberInput from 'carbon-components-svelte/src/NumberInput/NumberInput.svelte';
-  import ProgressBar from 'carbon-components-svelte/src/ProgressBar/ProgressBar.svelte';
-  import Tile from 'carbon-components-svelte/src/Tile/Tile.svelte';
-  import Calendar from 'carbon-icons-svelte/lib/Calendar.svelte';
-  import CheckmarkFilled from 'carbon-icons-svelte/lib/CheckmarkFilled.svelte';
-  import ContinueFilled from 'carbon-icons-svelte/lib/ContinueFilled.svelte';
-  import Exit from 'carbon-icons-svelte/lib/Exit.svelte';
-  import Headphones from 'carbon-icons-svelte/lib/Headphones.svelte';
-  import Repeat from 'carbon-icons-svelte/lib/Repeat.svelte';
-  import Trophy from 'carbon-icons-svelte/lib/Trophy.svelte';
-  import { onMount } from 'svelte';
-  import HitstarCard from './HitstarCard.svelte';
-
-  // 3. CONST
-  type GameState = 'MENU' | 'LOADING' | 'GUESSING' | 'REVEAL' | 'RESULTS';
-  const TOTAL_ROUNDS = 10;
-  const roundIndices = Array(TOTAL_ROUNDS).fill(0);
-  const STEP_COUNT = 5;
-  const STEPS = [
-    { icon: Headphones },
-    { icon: Calendar },
-    { icon: CheckmarkFilled },
-    { icon: Repeat },
-    { icon: Trophy },
-  ];
+  import Tab from 'carbon-components-svelte/src/Tabs/Tab.svelte';
+  import TabContent from 'carbon-components-svelte/src/Tabs/TabContent.svelte';
+  import Tabs from 'carbon-components-svelte/src/Tabs/Tabs.svelte';
+  import HitstarClassic from './HitstarClassic.svelte';
+  import HitstarRange from './HitstarRange.svelte';
 
   // 4. STATE
-  let gameState = $state<GameState>('MENU');
-  let currentRound = $state(1);
-  let score = $state(0);
-  let currentTrack = $state<SpotifyTrackDto | null>(null);
-  let guessedYear = $state<number>(2000);
-  let roundResults = $state<HitstarRoundResult[]>([]);
-  let isCorrect = $state(false);
-  let isCardFlipped = $state(false);
-  let errorMessage = $state('');
-  let isShaking = $state(false);
-  let currentStepIndex = $state(0);
-
-  // 6. EFFECTS
-  $effect(() => {
-    const interval = setInterval(() => {
-      currentStepIndex = (currentStepIndex + 1) % STEP_COUNT;
-    }, 2000);
-    return () => clearInterval(interval);
-  });
+  let selectedTab = $state(0);
+  let classicActive = $state(false);
+  let rangeActive = $state(false);
 
   // 5. DERIVED
-  const bestRound = $derived($hitstarBestRoundStore);
-  const isNewBestScore = $derived(!bestRound || score > bestRound.score);
-  const savedGameState = $derived($hitstarGameStateStore);
-
-  // 7. LIFECYCLE
-  onMount(() => {
-    // Restore game state if available (e.g. browser was closed mid-game)
-    if (savedGameState) {
-      currentRound = savedGameState.currentRound;
-      score = savedGameState.score;
-      currentTrack = savedGameState.currentTrack;
-      roundResults = savedGameState.roundResults;
-      // Resume at GUESSING if there's a current track, otherwise MENU
-      if (currentTrack) {
-        isCardFlipped = false;
-        gameState = 'GUESSING';
-      }
-    }
-  });
-
-  // 8. FUNCTIONS
-  const persistGameState = () => {
-    hitstarGameStateStore.set({
-      currentRound,
-      score,
-      currentTrack,
-      roundResults,
-    });
-  };
-
-  const clearPersistedGameState = () => {
-    hitstarGameStateStore.set(null);
-  };
-
-  const startGame = () => {
-    gameState = 'LOADING';
-    currentRound = 1;
-    score = 0;
-    roundResults = [];
-    guessedYear = 2000;
-    errorMessage = '';
-    isCardFlipped = false;
-    currentTrack = null;
-    fetchNextTrack();
-  };
-
-  const fetchNextTrack = async () => {
-    gameState = 'LOADING';
-    errorMessage = '';
-    try {
-      currentTrack = await getRandomTrack();
-      isCardFlipped = false;
-      persistGameState();
-      gameState = 'GUESSING';
-    } catch {
-      errorMessage = 'Failed to load track. Please try again.';
-      gameState = 'MENU';
-    }
-  };
-
-  const submitGuess = () => {
-    if (!currentTrack) return;
-
-    const correct = guessedYear === currentTrack.releaseYear;
-    isCorrect = correct;
-
-    if (correct) {
-      score += 1;
-      celebrate();
-    } else {
-      isShaking = true;
-      setTimeout(() => {
-        isShaking = false;
-      }, 500);
-    }
-
-    roundResults = [
-      ...roundResults,
-      {
-        round: currentRound,
-        track: currentTrack,
-        guessedYear,
-        correct,
-      },
-    ];
-
-    isCardFlipped = true;
-    gameState = 'REVEAL';
-  };
-
-  const nextRound = () => {
-    if (currentRound < TOTAL_ROUNDS) {
-      currentRound += 1;
-      guessedYear = 2000;
-      fetchNextTrack();
-    } else {
-      updateBestRound();
-      clearPersistedGameState();
-      gameState = 'RESULTS';
-    }
-  };
-
-  const updateBestRound = () => {
-    if (isNewBestScore && score > 0) {
-      const newBest: HitstarBestRound = {
-        score,
-        date: new Date().toLocaleDateString('de-DE'),
-      };
-      hitstarBestRoundStore.set(newBest);
-    }
-  };
-
-  const goToMenu = () => {
-    clearPersistedGameState();
-    gameState = 'MENU';
-    currentTrack = null;
-    isCardFlipped = false;
-    roundResults = [];
-    score = 0;
-    currentRound = 1;
-  };
+  const gameActive = $derived(
+    (selectedTab === 0 && classicActive) || (selectedTab === 1 && rangeActive),
+  );
 </script>
 
 {#if $initialized}
-  <div class="hitstar-container">
-    <!-- MENU STATE -->
-    {#if gameState === 'MENU'}
-      <div class="menu-screen">
-        <h1 class="headline">{$t('page.hitstar.menu.headline')}</h1>
-        <p class="description">{$t('page.hitstar.menu.description')}</p>
-
-        <div class="step-cards">
-          {#each STEPS as step, i}
-            {@const StepIcon = step.icon}
-            <div class="step-card" class:active={i === currentStepIndex}>
-              <StepIcon size={24} />
-              <span class="step-label"
-                >{$t(`page.hitstar.menu.step${i + 1}`)}</span
-              >
-            </div>
-          {/each}
-        </div>
-
-        {#if bestRound}
-          <Tile class="best-score-tile">
-            <p class="best-score-label">{$t('page.hitstar.menu.bestScore')}</p>
-            <p class="best-score-value">
-              {$t('page.hitstar.menu.bestScoreValue', {
-                score: String(bestRound.score),
-                date: bestRound.date,
-              })}
-            </p>
-          </Tile>
-        {/if}
-
-        {#if errorMessage}
-          <InlineNotification
-            kind="error"
-            title={errorMessage}
-            hideCloseButton
-          />
-        {/if}
-
-        {#if savedGameState}
-          <InlineNotification
-            kind="info"
-            title={$t('page.hitstar.menu.resumeInfo')}
-            hideCloseButton
-          />
-          <Button on:click={startGame} kind="secondary">
-            {$t('page.hitstar.menu.startGame')}
-          </Button>
-        {:else}
-          <Button on:click={startGame}
-            >{$t('page.hitstar.menu.startGame')}</Button
-          >
-        {/if}
-      </div>
-
-      <!-- LOADING STATE -->
-    {:else if gameState === 'LOADING'}
-      <div class="loading-screen">
-        <p>{$t('page.hitstar.loading.headline')}</p>
-        <ProgressBar helperText="" />
-      </div>
-
-      <!-- GUESSING STATE -->
-    {:else if gameState === 'GUESSING'}
-      <div class="guessing-screen">
-        <!-- TOP: Headline + Exit + Round tracker -->
-        <div class="game-top-section">
-          <div class="game-top-bar">
-            <h2 class="game-question">
-              {$t('page.hitstar.guessing.cardHint')}
-            </h2>
-            <Button
-              kind="danger"
-              size="small"
-              icon={Exit}
-              iconDescription={$t('page.hitstar.abort')}
-              tooltipPosition="left"
-              on:click={goToMenu}
-            />
-          </div>
-          <div class="round-tracker">
-            {#each roundIndices as _, i}
-              {@const roundNum = i + 1}
-              {@const result = roundResults.find((r) => r.round === roundNum)}
-              <div
-                class="round-dot"
-                class:correct={result?.correct === true}
-                class:wrong={result?.correct === false}
-              ></div>
-            {/each}
-          </div>
-        </div>
-
-        <!-- MIDDLE: Card + Audio (centered vertically) -->
-        <div class="game-middle-section">
-          <HitstarCard flipped={false} track={null} correct={false} />
-          {#if currentTrack?.previewUrl}
-            <audio
-              controls
-              autoplay
-              src={currentTrack.previewUrl}
-              class="audio-player"
-              aria-label={$t('page.hitstar.guessing.listeningHint')}
-            ></audio>
-          {/if}
-        </div>
-
-        <!-- BOTTOM: Year input + Submit -->
-        <div class="input-submit-row">
-          <div class="input-wrapper">
-            <NumberInput
-              labelText={$t('page.hitstar.guessing.yearLabel')}
-              placeholder={$t('page.hitstar.guessing.yearPlaceholder')}
-              bind:value={guessedYear}
-              min={1950}
-              max={2026}
-            />
-          </div>
-          <Button
-            icon={ContinueFilled}
-            iconDescription={$t('page.hitstar.guessing.submitButton')}
-            tooltipPosition="top"
-            on:click={submitGuess}
-            disabled={!guessedYear}
-          />
-        </div>
-      </div>
-
-      <!-- REVEAL STATE -->
-    {:else if gameState === 'REVEAL'}
-      <div class="reveal-screen">
-        <!-- TOP: Headline + Exit + Round tracker -->
-        <div class="game-top-section">
-          <div class="game-top-bar">
-            <h2 class="game-question">
-              {$t('page.hitstar.guessing.headline', {
-                round: String(currentRound),
-              })}
-            </h2>
-            <Button
-              kind="danger"
-              size="small"
-              icon={Exit}
-              iconDescription={$t('page.hitstar.abort')}
-              tooltipPosition="left"
-              on:click={goToMenu}
-            />
-          </div>
-          <div class="round-tracker">
-            {#each roundIndices as _, i}
-              {@const roundNum = i + 1}
-              {@const result = roundResults.find((r) => r.round === roundNum)}
-              <div
-                class="round-dot"
-                class:correct={result?.correct === true}
-                class:wrong={result?.correct === false}
-              ></div>
-            {/each}
-          </div>
-        </div>
-
-        <!-- MIDDLE: Card + Audio (centered vertically) -->
-        <div class="game-middle-section">
-          <div class:shake={isShaking}>
-            <HitstarCard
-              flipped={isCardFlipped}
-              track={currentTrack}
-              correct={isCorrect}
-            />
-          </div>
-
-          {#if currentTrack?.previewUrl}
-            <audio
-              controls
-              src={currentTrack.previewUrl}
-              class="audio-player"
-              aria-label="Song preview"
-            ></audio>
-          {/if}
-        </div>
-
-        <!-- BOTTOM: Next Round button -->
-        <div class="bottom-action">
-          <Button on:click={nextRound}>
-            {currentRound < TOTAL_ROUNDS
-              ? $t('page.hitstar.reveal.nextRound')
-              : $t('page.hitstar.reveal.seeResults')}
-          </Button>
-        </div>
-      </div>
-
-      <!-- RESULTS STATE -->
-    {:else if gameState === 'RESULTS'}
-      <div class="results-screen">
-        <!-- TOP: Headline + optional new-record -->
-        <div class="results-top-section">
-          <h1>{$t('page.hitstar.results.headline')}</h1>
-          {#if isNewBestScore && score > 0}
-            <InlineNotification
-              kind="success"
-              title={$t('page.hitstar.results.newRecord')}
-              hideCloseButton
-            />
-          {/if}
-        </div>
-
-        <!-- MIDDLE: Round results -->
-        <div class="results-middle-section">
-          <div class="results-table">
-            {#each roundResults as result}
-              <Tile class="result-tile {result.correct ? 'correct' : 'wrong'}">
-                <div class="result-row">
-                  <div
-                    class="result-indicator"
-                    class:indicator-correct={result.correct}
-                    class:indicator-wrong={!result.correct}
-                  ></div>
-                  <div class="result-content">
-                    <span class="result-round"
-                      >{$t('page.hitstar.results.round', {
-                        round: String(result.round),
-                      })}</span
-                    >
-                    <span class="result-track"
-                      >{result.track.name} – {result.track.artist}</span
-                    >
-                  </div>
-                </div>
-                <div class="result-years">
-                  <span
-                    >{$t('page.hitstar.results.yourGuess', {
-                      year: String(result.guessedYear),
-                    })}</span
-                  >
-                  <span
-                    >{$t('page.hitstar.results.correctYear', {
-                      year: String(result.track.releaseYear),
-                    })}</span
-                  >
-                </div>
-              </Tile>
-            {/each}
-          </div>
-        </div>
-
-        <!-- BOTTOM: Play Again -->
-        <div class="bottom-action">
-          <Button on:click={goToMenu}
-            >{$t('page.hitstar.results.playAgain')}</Button
-          >
-        </div>
-      </div>
-    {/if}
+  <div class="hitstar-container" class:game-active={gameActive}>
+    <Tabs bind:selected={selectedTab}>
+      <Tab label={$t('page.hitstar.tabs.classic')} />
+      <Tab label={$t('page.hitstar.tabs.range')} />
+      <svelte:fragment slot="content">
+        <TabContent>
+          <HitstarClassic bind:gameActive={classicActive} />
+        </TabContent>
+        <TabContent>
+          <HitstarRange bind:gameActive={rangeActive} />
+        </TabContent>
+      </svelte:fragment>
+    </Tabs>
   </div>
 {/if}
 
@@ -447,366 +40,36 @@
     display: flex;
     flex-direction: column;
     align-items: center;
-    padding: 1.5rem 1rem;
-    gap: 1.5rem;
     flex: 1;
     box-sizing: border-box;
-  }
-
-  .menu-screen,
-  .loading-screen {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    gap: 1.5rem;
-    width: 100%;
-  }
-
-  .results-screen {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
     width: 100%;
-    flex: 1;
   }
 
-  .results-top-section {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    gap: 0.75rem;
-    width: 100%;
-    padding-bottom: 0.75rem;
+  /* Tabs always visible as horizontal bar, no dropdown */
+  .hitstar-container :global(.bx--tabs-trigger) {
+    display: none;
   }
 
-  .results-middle-section {
-    flex: 1;
-    width: 100%;
-    overflow-y: auto;
-    padding-right: 2px;
+  .hitstar-container :global(.bx--tabs__nav--hidden) {
+    display: flex !important;
   }
 
-  .guessing-screen,
-  .reveal-screen {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
+  /* Full-width tab nav */
+  .hitstar-container :global(.bx--tabs) {
     width: 100%;
-    flex: 1;
-  }
-
-  /* ── Section layout within game screens ───────────────── */
-  .game-top-section {
-    display: flex;
-    flex-direction: column;
-    gap: 0.75rem;
-    width: 100%;
-  }
-
-  .game-middle-section {
-    flex: 1;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    gap: var(--default_padding);
-    width: 100%;
-  }
-
-  .bottom-action {
-    padding-top: 0.75rem;
-    padding-bottom: 0.75rem;
-    width: 100%;
-    display: flex;
-    justify-content: center;
-  }
-
-  /* ── Top bar: headline + exit button ─────────────────── */
-  .game-top-bar {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    width: 100%;
-    gap: 0.75rem;
-  }
-
-  .game-question {
-    font-size: 1.1rem;
-    font-weight: 600;
-    margin: 0;
-    flex: 1;
-    line-height: 1.3;
-  }
-
-  /* ── Round progress tracker ───────────────────────────── */
-  .round-tracker {
-    display: flex;
-    gap: 5px;
-    width: 100%;
-  }
-
-  .round-dot {
-    flex: 1;
-    height: 10px;
-    border-radius: 3px;
-    background: var(--cds-layer-02, #393939);
-    border: 1px solid var(--cds-border-subtle-01, #525252);
-    transition:
-      background 0.3s,
-      border-color 0.3s;
-  }
-
-  .round-dot.correct {
-    background: var(--cds-support-success, #24a148);
-    border-color: var(--cds-support-success, #24a148);
   }
 
-  .round-dot.wrong {
-    background: var(--cds-support-error, #da1e28);
-    border-color: var(--cds-support-error, #da1e28);
-  }
-
-  /* ── Year input + submit inline ───────────────────────── */
-  .input-submit-row {
-    display: flex;
-    align-items: flex-end;
+  .hitstar-container :global(.bx--tabs__nav) {
     width: 100%;
-    max-width: 360px;
-    padding-top: 0.75rem;
-    padding-bottom: 0.75rem;
   }
 
-  .input-wrapper {
-    flex: 1;
-    min-width: 0;
-  }
-
-  /* Force submit button to match NumberInput height (40px) and center icon */
-  .input-submit-row :global(button) {
-    height: 2.5rem;
-    width: 2.5rem;
-    min-height: unset;
-    margin-left: 0;
-    flex-shrink: 0;
-    display: flex;
-    align-items: center;
-    justify-content: center;
+  /* TabContent padding */
+  .hitstar-container :global(.bx--tab-content) {
     padding: 0;
   }
 
-  .input-submit-row :global(button svg) {
-    margin: 0;
-    position: static;
-  }
-
-  /* ── Step cards ───────────────────────────────────────── */
-  .step-cards {
-    display: flex;
-    gap: 0.5rem;
-    width: 100%;
-    max-width: 520px;
-    justify-content: center;
-  }
-
-  .step-card {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    gap: 0.25rem;
-    padding: 0.75rem 0.25rem;
-    border-radius: 6px;
-    border: 2px solid var(--cds-border-subtle-01, #525252);
-    background: var(--cds-layer-02, #393939);
-    flex: 1;
-    min-width: 0;
-    transition:
-      border-color 0.3s,
-      background 0.3s,
-      transform 0.3s,
-      opacity 0.3s;
-    opacity: 0.45;
-  }
-
-  .step-card.active {
-    border-color: var(--cds-interactive, #0f62fe);
-    background: var(--cds-layer-selected-01, #4c4c4c);
-    opacity: 1;
-    transform: scale(1.1);
-  }
-
-  .step-label {
-    font-size: 0.7rem;
-    text-align: center;
-    color: var(--cds-text-secondary);
-    line-height: 1.2;
-  }
-
-  .step-card.active .step-label {
-    color: var(--cds-text-primary);
-    font-weight: 500;
-  }
-
-  /* ── Menu styles ──────────────────────────────────────── */
-  .headline {
-    font-size: 2rem;
-    font-weight: bold;
-    text-align: center;
-    margin: 0;
-  }
-
-  .description {
-    text-align: center;
-    color: var(--cds-text-secondary);
-    margin: 0;
-    max-width: 480px;
-  }
-
-  .best-score-label {
-    font-size: 0.85rem;
-    color: var(--cds-text-secondary);
-    margin: 0 0 0.3rem;
-  }
-
-  .best-score-value {
-    font-size: 1.1rem;
-    font-weight: bold;
-    margin: 0;
-  }
-
-  /* ── Audio ────────────────────────────────────────────── */
-  .audio-player {
-    width: 100%;
-    max-width: 400px;
-    border-radius: 8px;
-  }
-
-  /* ── Results ──────────────────────────────────────────── */
-  .results-table {
-    display: flex;
-    flex-direction: column;
-    gap: 0.5rem;
-    width: 100%;
-  }
-
-  :global(.result-tile.correct) {
-    border-left: 4px solid #24a148 !important;
-  }
-
-  :global(.result-tile.wrong) {
-    border-left: 4px solid #da1e28 !important;
-  }
-
-  .result-row {
-    display: flex;
-    align-items: center;
-    gap: 0.75rem;
-  }
-
-  .result-indicator {
-    width: 14px;
-    height: 14px;
-    border-radius: 3px;
-    flex-shrink: 0;
-  }
-
-  .indicator-correct {
-    background: #24a148;
-  }
-
-  .indicator-wrong {
-    background: #da1e28;
-  }
-
-  .result-content {
-    display: flex;
-    align-items: center;
-    gap: 0.5rem;
-    flex: 1;
-    min-width: 0;
-  }
-
-  .result-round {
-    font-weight: bold;
-    white-space: nowrap;
-    flex-shrink: 0;
-  }
-
-  .result-track {
-    flex: 1;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-    font-size: 0.9rem;
-    color: var(--cds-text-secondary);
-  }
-
-  .result-years {
-    display: flex;
-    gap: 1rem;
-    font-size: 0.8rem;
-    color: var(--cds-text-secondary);
-    margin-top: 0.25rem;
-    padding-left: 1.75rem;
-  }
-
-  /* ── Shake animation ──────────────────────────────────── */
-  @keyframes shake {
-    0%,
-    100% {
-      transform: translateX(0);
-    }
-    10%,
-    30%,
-    50%,
-    70%,
-    90% {
-      transform: translateX(-5px);
-    }
-    20%,
-    40%,
-    60%,
-    80% {
-      transform: translateX(5px);
-    }
-  }
-
-  .shake {
-    animation: shake 0.5s ease-in-out;
-  }
-
-  /* ── Mobile adjustments ───────────────────────────────── */
-  @media (max-width: 480px) {
-    .hitstar-container {
-      padding: 0.5rem 0.75rem;
-      gap: 0;
-    }
-
-    .game-top-section {
-      gap: 0.5rem;
-      padding-bottom: 0.25rem;
-    }
-
-    .game-question {
-      font-size: 0.9rem;
-    }
-
-    .input-submit-row {
-      max-width: 100%;
-      padding-top: 0.5rem;
-      padding-bottom: 0.5rem;
-    }
-
-    .bottom-action {
-      padding-top: 0.5rem;
-      padding-bottom: 0.5rem;
-    }
-
-    .round-dot {
-      height: 6px;
-    }
-
-    .audio-player {
-      max-height: 40px;
-    }
+  /* Hide tabs during active game */
+  .game-active :global(.bx--tabs) {
+    display: none;
   }
 </style>
diff --git a/frontend/src/lib/components/hitstar/HitstarClassic.svelte b/frontend/src/lib/components/hitstar/HitstarClassic.svelte
new file mode 100644
index 00000000..54b1ac1d
--- /dev/null
+++ b/frontend/src/lib/components/hitstar/HitstarClassic.svelte
@@ -0,0 +1,498 @@
+<script lang="ts">
+  // 1. IMPORTS
+  import { getRandomTrack } from '$lib/api/spotify.api';
+  import type { HitstarBestRound, HitstarRoundResult, SpotifyTrackDto } from '$lib/types/spotify.dto';
+  import {
+    hitstarClassicBestRoundStore,
+    hitstarClassicGameStateStore,
+  } from '$lib/util/stores/store-hitstar';
+  import { celebrate } from '$lib/util/stores/stores-global';
+  import { t } from '$lib/util/translations';
+  import Button from 'carbon-components-svelte/src/Button/Button.svelte';
+  import InlineNotification from 'carbon-components-svelte/src/Notification/InlineNotification.svelte';
+  import NumberInput from 'carbon-components-svelte/src/NumberInput/NumberInput.svelte';
+  import Tile from 'carbon-components-svelte/src/Tile/Tile.svelte';
+  import Calendar from 'carbon-icons-svelte/lib/Calendar.svelte';
+  import CheckmarkFilled from 'carbon-icons-svelte/lib/CheckmarkFilled.svelte';
+  import ContinueFilled from 'carbon-icons-svelte/lib/ContinueFilled.svelte';
+  import Headphones from 'carbon-icons-svelte/lib/Headphones.svelte';
+  import Repeat from 'carbon-icons-svelte/lib/Repeat.svelte';
+  import Trophy from 'carbon-icons-svelte/lib/Trophy.svelte';
+  import { onMount } from 'svelte';
+  import HitstarCard from './HitstarCard.svelte';
+  import HitstarGameTopBar from './HitstarGameTopBar.svelte';
+  import HitstarLoadingScreen from './HitstarLoadingScreen.svelte';
+  import HitstarResultsScreen from './HitstarResultsScreen.svelte';
+  import HitstarRoundTracker from './HitstarRoundTracker.svelte';
+  import HitstarSpotifyEmbed from './HitstarSpotifyEmbed.svelte';
+
+  // 2. PROPS
+  let { gameActive = $bindable(false) } = $props();
+
+  // 3. CONST
+  type GameState = 'MENU' | 'LOADING' | 'GUESSING' | 'REVEAL' | 'RESULTS';
+  const TOTAL_ROUNDS = 10;
+  const STEP_COUNT = 5;
+  const STEPS = [
+    { icon: Headphones },
+    { icon: Calendar },
+    { icon: CheckmarkFilled },
+    { icon: Repeat },
+    { icon: Trophy },
+  ];
+
+  // 4. STATE
+  let gameState = $state<GameState>('MENU');
+  let currentRound = $state(1);
+  let score = $state(0);
+  let currentTrack = $state<SpotifyTrackDto | null>(null);
+  let guessedYear = $state<number>(2000);
+  let roundResults = $state<HitstarRoundResult[]>([]);
+  let isCorrect = $state(false);
+  let isCardFlipped = $state(false);
+  let errorMessage = $state('');
+  let isShaking = $state(false);
+  let currentStepIndex = $state(0);
+  let isNewBestScore = $state(false);
+
+  // 5. DERIVED
+  const bestRound = $derived($hitstarClassicBestRoundStore);
+  const savedGameState = $derived($hitstarClassicGameStateStore);
+
+  // 6. EFFECTS
+  $effect(() => {
+    const interval = setInterval(() => {
+      currentStepIndex = (currentStepIndex + 1) % STEP_COUNT;
+    }, 2000);
+    return () => clearInterval(interval);
+  });
+
+  $effect(() => {
+    gameActive = gameState !== 'MENU';
+  });
+
+  // 7. LIFECYCLE
+  onMount(() => {
+    if (savedGameState) {
+      currentRound = savedGameState.currentRound;
+      score = savedGameState.score;
+      currentTrack = savedGameState.currentTrack;
+      roundResults = savedGameState.roundResults;
+      if (currentTrack) {
+        isCardFlipped = false;
+        gameState = 'GUESSING';
+      }
+    }
+  });
+
+  // 8. FUNCTIONS
+  const persistGameState = () => {
+    hitstarClassicGameStateStore.set({ currentRound, score, currentTrack, roundResults });
+  };
+
+  const clearPersistedGameState = () => {
+    hitstarClassicGameStateStore.set(null);
+  };
+
+  const startGame = () => {
+    gameState = 'LOADING';
+    currentRound = 1;
+    score = 0;
+    roundResults = [];
+    guessedYear = 2000;
+    errorMessage = '';
+    isCardFlipped = false;
+    currentTrack = null;
+    fetchNextTrack();
+  };
+
+  const fetchNextTrack = async () => {
+    gameState = 'LOADING';
+    errorMessage = '';
+    try {
+      currentTrack = await getRandomTrack();
+      isCardFlipped = false;
+      persistGameState();
+      gameState = 'GUESSING';
+    } catch {
+      errorMessage = 'Failed to load track. Please try again.';
+      gameState = 'MENU';
+    }
+  };
+
+  const submitGuess = () => {
+    if (!currentTrack) return;
+
+    const correct = guessedYear === currentTrack.releaseYear;
+    isCorrect = correct;
+
+    if (correct) {
+      score += 1;
+      celebrate();
+    } else {
+      isShaking = true;
+      setTimeout(() => {
+        isShaking = false;
+      }, 500);
+    }
+
+    roundResults = [
+      ...roundResults,
+      { round: currentRound, track: currentTrack, guessedYear, correct },
+    ];
+
+    isCardFlipped = true;
+    gameState = 'REVEAL';
+  };
+
+  const nextRound = () => {
+    if (currentRound < TOTAL_ROUNDS) {
+      currentRound += 1;
+      guessedYear = 2000;
+      fetchNextTrack();
+    } else {
+      isNewBestScore = !bestRound || score > bestRound.score;
+      updateBestRound();
+      clearPersistedGameState();
+      gameState = 'RESULTS';
+    }
+  };
+
+  const updateBestRound = () => {
+    if (isNewBestScore && score > 0) {
+      const newBest: HitstarBestRound = {
+        score,
+        date: new Date().toLocaleDateString('de-DE'),
+      };
+      hitstarClassicBestRoundStore.set(newBest);
+    }
+  };
+
+  const goToMenu = () => {
+    clearPersistedGameState();
+    gameState = 'MENU';
+    currentTrack = null;
+    isCardFlipped = false;
+    roundResults = [];
+    score = 0;
+    currentRound = 1;
+  };
+</script>
+
+<!-- MENU STATE -->
+{#if gameState === 'MENU'}
+  <div class="menu-screen">
+    <h1 class="headline">{$t('page.hitstar.menu.headline')}</h1>
+    <p class="description">{$t('page.hitstar.menu.description')}</p>
+
+    <div class="step-cards">
+      {#each STEPS as step, i}
+        {@const StepIcon = step.icon}
+        <div class="step-card" class:active={i === currentStepIndex}>
+          <StepIcon size={24} />
+          <span class="step-label">{$t(`page.hitstar.menu.step${i + 1}`)}</span>
+        </div>
+      {/each}
+    </div>
+
+    {#if bestRound}
+      <Tile class="best-score-tile">
+        <p class="best-score-label">{$t('page.hitstar.menu.bestScore')}</p>
+        <p class="best-score-value">
+          {$t('page.hitstar.menu.bestScoreValue', {
+            score: String(bestRound.score),
+            date: bestRound.date,
+          })}
+        </p>
+      </Tile>
+    {/if}
+
+    {#if errorMessage}
+      <InlineNotification kind="error" title={errorMessage} hideCloseButton />
+    {/if}
+
+    {#if savedGameState}
+      <InlineNotification
+        kind="info"
+        title={$t('page.hitstar.menu.resumeInfo')}
+        hideCloseButton
+      />
+      <Button on:click={startGame} kind="secondary">{$t('page.hitstar.menu.startGame')}</Button>
+    {:else}
+      <Button on:click={startGame}>{$t('page.hitstar.menu.startGame')}</Button>
+    {/if}
+  </div>
+
+  <!-- LOADING STATE -->
+{:else if gameState === 'LOADING'}
+  <HitstarLoadingScreen headline={$t('page.hitstar.loading.headline')} />
+
+  <!-- GUESSING STATE -->
+{:else if gameState === 'GUESSING'}
+  <div class="guessing-screen">
+    <div class="game-top-section">
+      <HitstarGameTopBar
+        headline={$t('page.hitstar.guessing.cardHint')}
+        abortLabel={$t('page.hitstar.abort')}
+        onAbort={goToMenu}
+      />
+      <HitstarRoundTracker totalRounds={TOTAL_ROUNDS} {roundResults} />
+    </div>
+
+    <div class="game-middle-section">
+      <HitstarCard flipped={false} track={null} correct={false} />
+      <HitstarSpotifyEmbed trackId={currentTrack?.id ?? ''} masked={true} />
+    </div>
+
+    <div class="input-submit-row">
+      <div class="input-wrapper">
+        <NumberInput
+          labelText={$t('page.hitstar.guessing.yearLabel')}
+          placeholder={$t('page.hitstar.guessing.yearPlaceholder')}
+          bind:value={guessedYear}
+          min={1950}
+          max={2026}
+        />
+      </div>
+      <Button
+        icon={ContinueFilled}
+        iconDescription={$t('page.hitstar.guessing.submitButton')}
+        tooltipPosition="top"
+        on:click={submitGuess}
+        disabled={!guessedYear}
+      />
+    </div>
+  </div>
+
+  <!-- REVEAL STATE -->
+{:else if gameState === 'REVEAL'}
+  <div class="reveal-screen">
+    <div class="game-top-section">
+      <HitstarGameTopBar
+        headline={$t('page.hitstar.guessing.headline', { round: String(currentRound) })}
+        abortLabel={$t('page.hitstar.abort')}
+        onAbort={goToMenu}
+      />
+      <HitstarRoundTracker totalRounds={TOTAL_ROUNDS} {roundResults} />
+    </div>
+
+    <div class="game-middle-section">
+      <div class:shake={isShaking}>
+        <HitstarCard flipped={isCardFlipped} track={currentTrack} correct={isCorrect} />
+      </div>
+      <HitstarSpotifyEmbed trackId={currentTrack?.id ?? ''} masked={false} />
+    </div>
+
+    <div class="bottom-action">
+      <Button on:click={nextRound}>
+        {currentRound < TOTAL_ROUNDS
+          ? $t('page.hitstar.reveal.nextRound')
+          : $t('page.hitstar.reveal.seeResults')}
+      </Button>
+    </div>
+  </div>
+
+  <!-- RESULTS STATE -->
+{:else if gameState === 'RESULTS'}
+  <HitstarResultsScreen
+    {score}
+    maxScore={10}
+    {isNewBestScore}
+    {roundResults}
+    onPlayAgain={goToMenu}
+  >
+    {#snippet guessDisplay(result)}
+      <span
+        >{$t('page.hitstar.results.yourGuess', { year: String(result.guessedYear) })}</span
+      >
+    {/snippet}
+  </HitstarResultsScreen>
+{/if}
+
+<style>
+  .menu-screen {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 1.5rem;
+    width: 100%;
+  }
+
+  .guessing-screen,
+  .reveal-screen {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    width: 100%;
+  }
+
+  .game-top-section {
+    display: flex;
+    flex-direction: column;
+    gap: 0.75rem;
+    width: 100%;
+  }
+
+  .game-middle-section {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: var(--default_padding);
+    width: 100%;
+    padding: 1.5rem 0;
+  }
+
+  .bottom-action {
+    padding-top: 0.75rem;
+    padding-bottom: 0.75rem;
+    width: 100%;
+    display: flex;
+    justify-content: center;
+  }
+
+  .input-submit-row {
+    display: flex;
+    align-items: flex-end;
+    width: 100%;
+    max-width: 360px;
+    padding-top: 0.75rem;
+    padding-bottom: 0.75rem;
+  }
+
+  .input-wrapper {
+    flex: 1;
+    min-width: 0;
+  }
+
+  .input-submit-row :global(button) {
+    height: 2.5rem;
+    width: 2.5rem;
+    min-height: unset;
+    margin-left: 0;
+    flex-shrink: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 0;
+  }
+
+  .input-submit-row :global(button svg) {
+    margin: 0;
+    position: static;
+  }
+
+  .step-cards {
+    display: flex;
+    gap: 0.5rem;
+    width: 100%;
+    max-width: 520px;
+    justify-content: center;
+  }
+
+  .step-card {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 0.25rem;
+    padding: 0.75rem 0.25rem;
+    border-radius: 6px;
+    border: 2px solid var(--cds-border-subtle-01, #525252);
+    background: var(--cds-layer-02, #393939);
+    flex: 1;
+    min-width: 0;
+    transition:
+      border-color 0.3s,
+      background 0.3s,
+      transform 0.3s,
+      opacity 0.3s;
+    opacity: 0.45;
+  }
+
+  .step-card.active {
+    border-color: var(--cds-interactive, #0f62fe);
+    background: var(--cds-layer-selected-01, #4c4c4c);
+    opacity: 1;
+    transform: scale(1.1);
+  }
+
+  .step-label {
+    font-size: 0.7rem;
+    text-align: center;
+    color: var(--cds-text-secondary);
+    line-height: 1.2;
+  }
+
+  .step-card.active .step-label {
+    color: var(--cds-text-primary);
+    font-weight: 500;
+  }
+
+  .headline {
+    font-size: 2rem;
+    font-weight: bold;
+    text-align: center;
+    margin: 0;
+  }
+
+  .description {
+    text-align: center;
+    color: var(--cds-text-secondary);
+    margin: 0;
+    max-width: 480px;
+  }
+
+  .best-score-label {
+    font-size: 0.85rem;
+    color: var(--cds-text-secondary);
+    margin: 0 0 0.3rem;
+  }
+
+  .best-score-value {
+    font-size: 1.1rem;
+    font-weight: bold;
+    margin: 0;
+  }
+
+  @keyframes shake {
+    0%,
+    100% {
+      transform: translateX(0);
+    }
+    10%,
+    30%,
+    50%,
+    70%,
+    90% {
+      transform: translateX(-5px);
+    }
+    20%,
+    40%,
+    60%,
+    80% {
+      transform: translateX(5px);
+    }
+  }
+
+  .shake {
+    animation: shake 0.5s ease-in-out;
+  }
+
+  @media (max-width: 480px) {
+    .game-top-section {
+      gap: 0.5rem;
+      padding-bottom: 0.25rem;
+    }
+
+    .input-submit-row {
+      max-width: 100%;
+      padding-top: 0.5rem;
+      padding-bottom: 0.5rem;
+    }
+
+    .bottom-action {
+      padding-top: 0.5rem;
+      padding-bottom: 0.5rem;
+    }
+
+  }
+</style>
diff --git a/frontend/src/lib/components/hitstar/HitstarGameTopBar.svelte b/frontend/src/lib/components/hitstar/HitstarGameTopBar.svelte
new file mode 100644
index 00000000..266c587a
--- /dev/null
+++ b/frontend/src/lib/components/hitstar/HitstarGameTopBar.svelte
@@ -0,0 +1,48 @@
+<script lang="ts">
+  // 1. IMPORTS
+  import Button from 'carbon-components-svelte/src/Button/Button.svelte';
+  import Exit from 'carbon-icons-svelte/lib/Exit.svelte';
+
+  // 2. PROPS
+  let {
+    headline,
+    abortLabel,
+    onAbort,
+  }: { headline: string; abortLabel: string; onAbort: () => void } = $props();
+</script>
+
+<div class="game-top-bar">
+  <h2 class="game-question">{headline}</h2>
+  <Button
+    kind="danger"
+    size="small"
+    icon={Exit}
+    iconDescription={abortLabel}
+    tooltipPosition="left"
+    on:click={onAbort}
+  />
+</div>
+
+<style>
+  .game-top-bar {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    width: 100%;
+    gap: 0.75rem;
+  }
+
+  .game-question {
+    font-size: 1.1rem;
+    font-weight: 600;
+    margin: 0;
+    flex: 1;
+    line-height: 1.3;
+  }
+
+  @media (max-width: 480px) {
+    .game-question {
+      font-size: 0.9rem;
+    }
+  }
+</style>
diff --git a/frontend/src/lib/components/hitstar/HitstarLoadingScreen.svelte b/frontend/src/lib/components/hitstar/HitstarLoadingScreen.svelte
new file mode 100644
index 00000000..9035e289
--- /dev/null
+++ b/frontend/src/lib/components/hitstar/HitstarLoadingScreen.svelte
@@ -0,0 +1,22 @@
+<script lang="ts">
+  // 1. IMPORTS
+  import ProgressBar from 'carbon-components-svelte/src/ProgressBar/ProgressBar.svelte';
+
+  // 2. PROPS
+  let { headline }: { headline: string } = $props();
+</script>
+
+<div class="loading-screen">
+  <p>{headline}</p>
+  <ProgressBar helperText="" />
+</div>
+
+<style>
+  .loading-screen {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 1.5rem;
+    width: 100%;
+  }
+</style>
diff --git a/frontend/src/lib/components/hitstar/HitstarRange.svelte b/frontend/src/lib/components/hitstar/HitstarRange.svelte
new file mode 100644
index 00000000..aa26a5cf
--- /dev/null
+++ b/frontend/src/lib/components/hitstar/HitstarRange.svelte
@@ -0,0 +1,585 @@
+<script lang="ts">
+  // 1. IMPORTS
+  import { getRandomTrack } from '$lib/api/spotify.api';
+  import type { HitstarBestRound, HitstarRoundResult, SpotifyTrackDto } from '$lib/types/spotify.dto';
+  import {
+    hitstarRangeBestRoundStore,
+    hitstarRangeGameStateStore,
+  } from '$lib/util/stores/store-hitstar';
+  import { celebrate } from '$lib/util/stores/stores-global';
+  import { t } from '$lib/util/translations';
+  import Button from 'carbon-components-svelte/src/Button/Button.svelte';
+  import InlineNotification from 'carbon-components-svelte/src/Notification/InlineNotification.svelte';
+  import NumberInput from 'carbon-components-svelte/src/NumberInput/NumberInput.svelte';
+  import Tile from 'carbon-components-svelte/src/Tile/Tile.svelte';
+  import Calendar from 'carbon-icons-svelte/lib/Calendar.svelte';
+  import CheckmarkFilled from 'carbon-icons-svelte/lib/CheckmarkFilled.svelte';
+  import ContinueFilled from 'carbon-icons-svelte/lib/ContinueFilled.svelte';
+  import Headphones from 'carbon-icons-svelte/lib/Headphones.svelte';
+  import Repeat from 'carbon-icons-svelte/lib/Repeat.svelte';
+  import Trophy from 'carbon-icons-svelte/lib/Trophy.svelte';
+  import { onMount } from 'svelte';
+  import HitstarCard from './HitstarCard.svelte';
+  import HitstarGameTopBar from './HitstarGameTopBar.svelte';
+  import HitstarLoadingScreen from './HitstarLoadingScreen.svelte';
+  import HitstarResultsScreen from './HitstarResultsScreen.svelte';
+  import HitstarRoundTracker from './HitstarRoundTracker.svelte';
+  import HitstarSpotifyEmbed from './HitstarSpotifyEmbed.svelte';
+
+  // 2. PROPS
+  let { gameActive = $bindable(false) } = $props();
+
+  // 3. CONST
+  type GameState = 'MENU' | 'LOADING' | 'GUESSING' | 'REVEAL' | 'RESULTS';
+  const TOTAL_ROUNDS = 10;
+  const STEP_COUNT = 5;
+  const STEPS = [
+    { icon: Headphones },
+    { icon: Calendar },
+    { icon: CheckmarkFilled },
+    { icon: Repeat },
+    { icon: Trophy },
+  ];
+
+  // 4. STATE
+  let gameState = $state<GameState>('MENU');
+  let currentRound = $state(1);
+  let score = $state(0);
+  let currentTrack = $state<SpotifyTrackDto | null>(null);
+  let rangeFrom = $state<number>(2000);
+  let rangeTo = $state<number>(2000);
+  let roundResults = $state<HitstarRoundResult[]>([]);
+  let isCorrect = $state(false);
+  let isCardFlipped = $state(false);
+  let errorMessage = $state('');
+  let validationError = $state('');
+  let isShaking = $state(false);
+  let currentStepIndex = $state(0);
+  let isNewBestScore = $state(false);
+
+  // 5. DERIVED
+  const bestRound = $derived($hitstarRangeBestRoundStore);
+  const savedGameState = $derived($hitstarRangeGameStateStore);
+  const rangeSize = $derived(rangeTo - rangeFrom + 1);
+  const potentialPoints = $derived(rangeSize >= 1 && rangeSize <= 5 ? 6 - rangeSize : 0);
+
+  // 6. EFFECTS
+  $effect(() => {
+    const interval = setInterval(() => {
+      currentStepIndex = (currentStepIndex + 1) % STEP_COUNT;
+    }, 2000);
+    return () => clearInterval(interval);
+  });
+
+  $effect(() => {
+    gameActive = gameState !== 'MENU';
+  });
+
+  // 7. LIFECYCLE
+  onMount(() => {
+    if (savedGameState) {
+      currentRound = savedGameState.currentRound;
+      score = savedGameState.score;
+      currentTrack = savedGameState.currentTrack;
+      roundResults = savedGameState.roundResults;
+      if (currentTrack) {
+        isCardFlipped = false;
+        gameState = 'GUESSING';
+      }
+    }
+  });
+
+  // 8. FUNCTIONS
+  const persistGameState = () => {
+    hitstarRangeGameStateStore.set({ currentRound, score, currentTrack, roundResults });
+  };
+
+  const clearPersistedGameState = () => {
+    hitstarRangeGameStateStore.set(null);
+  };
+
+  const startGame = () => {
+    gameState = 'LOADING';
+    currentRound = 1;
+    score = 0;
+    roundResults = [];
+    rangeFrom = 2000;
+    rangeTo = 2000;
+    errorMessage = '';
+    validationError = '';
+    isCardFlipped = false;
+    currentTrack = null;
+    fetchNextTrack();
+  };
+
+  const fetchNextTrack = async () => {
+    gameState = 'LOADING';
+    errorMessage = '';
+    validationError = '';
+    try {
+      currentTrack = await getRandomTrack();
+      isCardFlipped = false;
+      persistGameState();
+      gameState = 'GUESSING';
+    } catch {
+      errorMessage = 'Failed to load track. Please try again.';
+      gameState = 'MENU';
+    }
+  };
+
+  const submitGuess = () => {
+    if (!currentTrack) return;
+
+    if (rangeTo < rangeFrom) {
+      validationError = $t('page.hitstar.range.guessing.errorFromTo');
+      isShaking = true;
+      setTimeout(() => (isShaking = false), 500);
+      return;
+    }
+
+    const size = rangeTo - rangeFrom + 1;
+    if (size < 1 || size > 5) {
+      validationError = $t('page.hitstar.range.guessing.errorRangeSize');
+      isShaking = true;
+      setTimeout(() => (isShaking = false), 500);
+      return;
+    }
+
+    validationError = '';
+    const correct =
+      rangeFrom <= currentTrack.releaseYear && currentTrack.releaseYear <= rangeTo;
+    const pointsEarned = correct ? 6 - size : 0;
+    isCorrect = correct;
+
+    if (correct) {
+      score += pointsEarned;
+      celebrate();
+    } else {
+      isShaking = true;
+      setTimeout(() => (isShaking = false), 500);
+    }
+
+    roundResults = [
+      ...roundResults,
+      {
+        round: currentRound,
+        track: currentTrack,
+        guessedYear: rangeFrom,
+        correct,
+        rangeFrom,
+        rangeTo,
+        pointsEarned,
+      },
+    ];
+
+    isCardFlipped = true;
+    gameState = 'REVEAL';
+  };
+
+  const nextRound = () => {
+    if (currentRound < TOTAL_ROUNDS) {
+      currentRound += 1;
+      rangeFrom = 2000;
+      rangeTo = 2000;
+      fetchNextTrack();
+    } else {
+      isNewBestScore = !bestRound || score > bestRound.score;
+      updateBestRound();
+      clearPersistedGameState();
+      gameState = 'RESULTS';
+    }
+  };
+
+  const updateBestRound = () => {
+    if (isNewBestScore && score > 0) {
+      const newBest: HitstarBestRound = {
+        score,
+        date: new Date().toLocaleDateString('de-DE'),
+      };
+      hitstarRangeBestRoundStore.set(newBest);
+    }
+  };
+
+  const goToMenu = () => {
+    clearPersistedGameState();
+    gameState = 'MENU';
+    currentTrack = null;
+    isCardFlipped = false;
+    roundResults = [];
+    score = 0;
+    currentRound = 1;
+  };
+</script>
+
+<!-- MENU STATE -->
+{#if gameState === 'MENU'}
+  <div class="menu-screen">
+    <h1 class="headline">{$t('page.hitstar.range.menu.headline')}</h1>
+    <p class="description">{$t('page.hitstar.range.menu.description')}</p>
+
+    <div class="step-cards">
+      {#each STEPS as step, i}
+        {@const StepIcon = step.icon}
+        <div class="step-card" class:active={i === currentStepIndex}>
+          <StepIcon size={24} />
+          <span class="step-label">
+            {#if i === 1}
+              {$t('page.hitstar.range.menu.step2')}
+            {:else}
+              {$t(`page.hitstar.menu.step${i + 1}`)}
+            {/if}
+          </span>
+        </div>
+      {/each}
+    </div>
+
+    {#if bestRound}
+      <Tile class="best-score-tile">
+        <p class="best-score-label">{$t('page.hitstar.menu.bestScore')}</p>
+        <p class="best-score-value">
+          {$t('page.hitstar.range.menu.bestScoreValue', {
+            score: String(bestRound.score),
+            date: bestRound.date,
+          })}
+        </p>
+      </Tile>
+    {/if}
+
+    {#if errorMessage}
+      <InlineNotification kind="error" title={errorMessage} hideCloseButton />
+    {/if}
+
+    {#if savedGameState}
+      <InlineNotification
+        kind="info"
+        title={$t('page.hitstar.menu.resumeInfo')}
+        hideCloseButton
+      />
+      <Button on:click={startGame} kind="secondary">{$t('page.hitstar.menu.startGame')}</Button>
+    {:else}
+      <Button on:click={startGame}>{$t('page.hitstar.menu.startGame')}</Button>
+    {/if}
+  </div>
+
+  <!-- LOADING STATE -->
+{:else if gameState === 'LOADING'}
+  <HitstarLoadingScreen headline={$t('page.hitstar.loading.headline')} />
+
+  <!-- GUESSING STATE -->
+{:else if gameState === 'GUESSING'}
+  <div class="guessing-screen">
+    <div class="game-top-section">
+      <HitstarGameTopBar
+        headline={$t('page.hitstar.range.guessing.cardHint')}
+        abortLabel={$t('page.hitstar.abort')}
+        onAbort={goToMenu}
+      />
+      <HitstarRoundTracker totalRounds={TOTAL_ROUNDS} {roundResults} />
+    </div>
+
+    <div class="game-middle-section">
+      <HitstarCard flipped={false} track={null} correct={false} />
+      <HitstarSpotifyEmbed trackId={currentTrack?.id ?? ''} masked={true} />
+    </div>
+
+    <div class="range-input-section">
+      <div class="range-input-row">
+        <div class="input-wrapper">
+          <NumberInput
+            labelText={$t('page.hitstar.range.guessing.fromLabel')}
+            bind:value={rangeFrom}
+            min={1950}
+            max={2026}
+          />
+        </div>
+        <div class="input-wrapper">
+          <NumberInput
+            labelText={$t('page.hitstar.range.guessing.toLabel')}
+            bind:value={rangeTo}
+            min={1950}
+            max={2026}
+          />
+        </div>
+        <Button
+          icon={ContinueFilled}
+          iconDescription={$t('page.hitstar.guessing.submitButton')}
+          tooltipPosition="top"
+          on:click={submitGuess}
+        />
+      </div>
+      {#if validationError}
+        <p class="validation-error">{validationError}</p>
+      {:else if potentialPoints > 0}
+        <p class="potential-points">
+          {$t('page.hitstar.range.guessing.potentialPoints', {
+            points: String(potentialPoints),
+          })}
+        </p>
+      {/if}
+    </div>
+  </div>
+
+  <!-- REVEAL STATE -->
+{:else if gameState === 'REVEAL'}
+  <div class="reveal-screen">
+    <div class="game-top-section">
+      <HitstarGameTopBar
+        headline={$t('page.hitstar.guessing.headline', { round: String(currentRound) })}
+        abortLabel={$t('page.hitstar.abort')}
+        onAbort={goToMenu}
+      />
+      <HitstarRoundTracker totalRounds={TOTAL_ROUNDS} {roundResults} />
+    </div>
+
+    <div class="game-middle-section">
+      <div class:shake={isShaking}>
+        <HitstarCard flipped={isCardFlipped} track={currentTrack} correct={isCorrect} />
+      </div>
+      <HitstarSpotifyEmbed trackId={currentTrack?.id ?? ''} masked={false} />
+    </div>
+
+    <div class="bottom-action">
+      <Button on:click={nextRound}>
+        {currentRound < TOTAL_ROUNDS
+          ? $t('page.hitstar.reveal.nextRound')
+          : $t('page.hitstar.reveal.seeResults')}
+      </Button>
+    </div>
+  </div>
+
+  <!-- RESULTS STATE -->
+{:else if gameState === 'RESULTS'}
+  <HitstarResultsScreen
+    {score}
+    maxScore={50}
+    {isNewBestScore}
+    {roundResults}
+    onPlayAgain={goToMenu}
+  >
+    {#snippet guessDisplay(result)}
+      <span>
+        {$t('page.hitstar.range.results.yourGuess', {
+          fromYear: String(result.rangeFrom ?? result.guessedYear),
+          toYear: String(result.rangeTo ?? result.guessedYear),
+        })}
+      </span>
+      {#if result.pointsEarned && result.pointsEarned > 0}
+        <span class="points-badge">
+          {$t('page.hitstar.range.results.points', { points: String(result.pointsEarned) })}
+        </span>
+      {/if}
+    {/snippet}
+  </HitstarResultsScreen>
+{/if}
+
+<style>
+  .menu-screen {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 1.5rem;
+    width: 100%;
+  }
+
+  .guessing-screen,
+  .reveal-screen {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    width: 100%;
+  }
+
+  .game-top-section {
+    display: flex;
+    flex-direction: column;
+    gap: 0.75rem;
+    width: 100%;
+  }
+
+  .game-middle-section {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: var(--default_padding);
+    width: 100%;
+    padding: 1.5rem 0;
+  }
+
+  .bottom-action {
+    padding-top: 0.75rem;
+    padding-bottom: 0.75rem;
+    width: 100%;
+    display: flex;
+    justify-content: center;
+  }
+
+  .range-input-section {
+    width: 100%;
+    max-width: 420px;
+    padding-top: 0.75rem;
+    padding-bottom: 0.75rem;
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+  }
+
+  .range-input-row {
+    display: flex;
+    align-items: flex-end;
+    gap: 0.5rem;
+    width: 100%;
+  }
+
+  .input-wrapper {
+    flex: 1;
+    min-width: 0;
+  }
+
+  .range-input-row :global(button) {
+    height: 2.5rem;
+    width: 2.5rem;
+    min-height: unset;
+    flex-shrink: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 0;
+  }
+
+  .range-input-row :global(button svg) {
+    margin: 0;
+    position: static;
+  }
+
+  .potential-points {
+    font-size: 0.85rem;
+    color: var(--cds-support-success, #24a148);
+    margin: 0;
+  }
+
+  .validation-error {
+    font-size: 0.85rem;
+    color: var(--cds-support-error, #da1e28);
+    margin: 0;
+  }
+
+  .points-badge {
+    color: var(--cds-support-success, #24a148);
+    font-weight: 600;
+  }
+
+  .step-cards {
+    display: flex;
+    gap: 0.5rem;
+    width: 100%;
+    max-width: 520px;
+    justify-content: center;
+  }
+
+  .step-card {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 0.25rem;
+    padding: 0.75rem 0.25rem;
+    border-radius: 6px;
+    border: 2px solid var(--cds-border-subtle-01, #525252);
+    background: var(--cds-layer-02, #393939);
+    flex: 1;
+    min-width: 0;
+    transition:
+      border-color 0.3s,
+      background 0.3s,
+      transform 0.3s,
+      opacity 0.3s;
+    opacity: 0.45;
+  }
+
+  .step-card.active {
+    border-color: var(--cds-interactive, #0f62fe);
+    background: var(--cds-layer-selected-01, #4c4c4c);
+    opacity: 1;
+    transform: scale(1.1);
+  }
+
+  .step-label {
+    font-size: 0.7rem;
+    text-align: center;
+    color: var(--cds-text-secondary);
+    line-height: 1.2;
+  }
+
+  .step-card.active .step-label {
+    color: var(--cds-text-primary);
+    font-weight: 500;
+  }
+
+  .headline {
+    font-size: 2rem;
+    font-weight: bold;
+    text-align: center;
+    margin: 0;
+  }
+
+  .description {
+    text-align: center;
+    color: var(--cds-text-secondary);
+    margin: 0;
+    max-width: 480px;
+  }
+
+  .best-score-label {
+    font-size: 0.85rem;
+    color: var(--cds-text-secondary);
+    margin: 0 0 0.3rem;
+  }
+
+  .best-score-value {
+    font-size: 1.1rem;
+    font-weight: bold;
+    margin: 0;
+  }
+
+  @keyframes shake {
+    0%,
+    100% {
+      transform: translateX(0);
+    }
+    10%,
+    30%,
+    50%,
+    70%,
+    90% {
+      transform: translateX(-5px);
+    }
+    20%,
+    40%,
+    60%,
+    80% {
+      transform: translateX(5px);
+    }
+  }
+
+  .shake {
+    animation: shake 0.5s ease-in-out;
+  }
+
+  @media (max-width: 480px) {
+    .game-top-section {
+      gap: 0.5rem;
+      padding-bottom: 0.25rem;
+    }
+
+    .range-input-section {
+      max-width: 100%;
+      padding-top: 0.5rem;
+      padding-bottom: 0.5rem;
+    }
+
+    .bottom-action {
+      padding-top: 0.5rem;
+      padding-bottom: 0.5rem;
+    }
+
+  }
+</style>
diff --git a/frontend/src/lib/components/hitstar/HitstarResultsScreen.svelte b/frontend/src/lib/components/hitstar/HitstarResultsScreen.svelte
new file mode 100644
index 00000000..040d502d
--- /dev/null
+++ b/frontend/src/lib/components/hitstar/HitstarResultsScreen.svelte
@@ -0,0 +1,186 @@
+<script lang="ts">
+  // 1. IMPORTS
+  import type { Snippet } from 'svelte';
+  import type { HitstarRoundResult } from '$lib/types/spotify.dto';
+  import Button from 'carbon-components-svelte/src/Button/Button.svelte';
+  import InlineNotification from 'carbon-components-svelte/src/Notification/InlineNotification.svelte';
+  import Tile from 'carbon-components-svelte/src/Tile/Tile.svelte';
+  import { t } from '$lib/util/translations';
+
+  // 2. PROPS
+  let {
+    score,
+    maxScore,
+    isNewBestScore,
+    roundResults,
+    onPlayAgain,
+    guessDisplay,
+  }: {
+    score: number;
+    maxScore: number;
+    isNewBestScore: boolean;
+    roundResults: HitstarRoundResult[];
+    onPlayAgain: () => void;
+    guessDisplay: Snippet<[HitstarRoundResult]>;
+  } = $props();
+</script>
+
+<div class="results-screen">
+  <div class="results-top-section">
+    <h1>{$t('page.hitstar.results.headline')}</h1>
+    <p class="score-summary">{score} / {maxScore}</p>
+    {#if isNewBestScore && score > 0}
+      <InlineNotification
+        kind="success"
+        title={$t('page.hitstar.results.newRecord')}
+        hideCloseButton
+      />
+    {/if}
+  </div>
+
+  <div class="results-middle-section">
+    <div class="results-table">
+      {#each roundResults as result}
+        <Tile class="result-tile {result.correct ? 'correct' : 'wrong'}">
+          <div class="result-row">
+            <div
+              class="result-indicator"
+              class:indicator-correct={result.correct}
+              class:indicator-wrong={!result.correct}
+            ></div>
+            <div class="result-content">
+              <span class="result-round"
+                >{$t('page.hitstar.results.round', {
+                  round: String(result.round),
+                })}</span
+              >
+              <span class="result-track">{result.track.name} – {result.track.artist}</span>
+            </div>
+          </div>
+          <div class="result-years">
+            {@render guessDisplay(result)}
+            <span
+              >{$t('page.hitstar.results.correctYear', {
+                year: String(result.track.releaseYear),
+              })}</span
+            >
+          </div>
+        </Tile>
+      {/each}
+    </div>
+  </div>
+
+  <div class="bottom-action">
+    <Button on:click={onPlayAgain}>{$t('page.hitstar.results.playAgain')}</Button>
+  </div>
+</div>
+
+<style>
+  .results-screen {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    width: 100%;
+    flex: 1;
+  }
+
+  .results-top-section {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 0.75rem;
+    width: 100%;
+    padding-bottom: 0.75rem;
+  }
+
+  .score-summary {
+    font-size: 1.4rem;
+    font-weight: bold;
+    margin: 0;
+    color: var(--cds-text-primary);
+  }
+
+  .results-middle-section {
+    flex: 1;
+    width: 100%;
+    overflow-y: auto;
+    padding-right: 2px;
+  }
+
+  .results-table {
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+    width: 100%;
+  }
+
+  :global(.result-tile.correct) {
+    border-left: 4px solid #24a148 !important;
+  }
+
+  :global(.result-tile.wrong) {
+    border-left: 4px solid #da1e28 !important;
+  }
+
+  .result-row {
+    display: flex;
+    align-items: center;
+    gap: 0.75rem;
+  }
+
+  .result-indicator {
+    width: 14px;
+    height: 14px;
+    border-radius: 3px;
+    flex-shrink: 0;
+  }
+
+  .indicator-correct {
+    background: #24a148;
+  }
+
+  .indicator-wrong {
+    background: #da1e28;
+  }
+
+  .result-content {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    flex: 1;
+    min-width: 0;
+  }
+
+  .result-round {
+    font-weight: bold;
+    white-space: nowrap;
+    flex-shrink: 0;
+  }
+
+  .result-track {
+    flex: 1;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    font-size: 0.9rem;
+    color: var(--cds-text-secondary);
+  }
+
+  .result-years {
+    display: flex;
+    gap: 1rem;
+    font-size: 0.8rem;
+    color: var(--cds-text-secondary);
+    margin-top: 0.25rem;
+    padding-left: 1.75rem;
+    flex-wrap: wrap;
+  }
+
+  .bottom-action {
+    padding-top: 0.75rem;
+    padding-bottom: 0.75rem;
+    width: 100%;
+    display: flex;
+    justify-content: center;
+  }
+</style>
diff --git a/frontend/src/lib/components/hitstar/HitstarRoundTracker.svelte b/frontend/src/lib/components/hitstar/HitstarRoundTracker.svelte
new file mode 100644
index 00000000..8acfaf92
--- /dev/null
+++ b/frontend/src/lib/components/hitstar/HitstarRoundTracker.svelte
@@ -0,0 +1,55 @@
+<script lang="ts">
+  // 1. IMPORTS
+  import type { HitstarRoundResult } from '$lib/types/spotify.dto';
+
+  // 2. PROPS
+  let { totalRounds, roundResults }: { totalRounds: number; roundResults: HitstarRoundResult[] } =
+    $props();
+</script>
+
+<div class="round-tracker">
+  {#each { length: totalRounds } as _, i}
+    {@const roundNum = i + 1}
+    {@const result = roundResults.find((r) => r.round === roundNum)}
+    <div
+      class="round-dot"
+      class:correct={result?.correct === true}
+      class:wrong={result?.correct === false}
+    ></div>
+  {/each}
+</div>
+
+<style>
+  .round-tracker {
+    display: flex;
+    gap: 5px;
+    width: 100%;
+  }
+
+  .round-dot {
+    flex: 1;
+    height: 10px;
+    border-radius: 3px;
+    background: var(--cds-layer-02, #393939);
+    border: 1px solid var(--cds-border-subtle-01, #525252);
+    transition:
+      background 0.3s,
+      border-color 0.3s;
+  }
+
+  .round-dot.correct {
+    background: var(--cds-support-success, #24a148);
+    border-color: var(--cds-support-success, #24a148);
+  }
+
+  .round-dot.wrong {
+    background: var(--cds-support-error, #da1e28);
+    border-color: var(--cds-support-error, #da1e28);
+  }
+
+  @media (max-width: 480px) {
+    .round-dot {
+      height: 6px;
+    }
+  }
+</style>
diff --git a/frontend/src/lib/components/hitstar/HitstarSpotifyEmbed.svelte b/frontend/src/lib/components/hitstar/HitstarSpotifyEmbed.svelte
new file mode 100644
index 00000000..9452cf25
--- /dev/null
+++ b/frontend/src/lib/components/hitstar/HitstarSpotifyEmbed.svelte
@@ -0,0 +1,67 @@
+<script lang="ts">
+  // 2. PROPS
+  let { trackId, masked }: { trackId: string; masked: boolean } = $props();
+
+  // 5. DERIVED
+  const embedUrl = $derived(
+    `https://open.spotify.com/embed/track/${trackId}?utm_source=generator&theme=0`,
+  );
+</script>
+
+{#if trackId}
+  <div class="embed-container">
+    <iframe
+      src={embedUrl}
+      width="100%"
+      height="80"
+      frameborder="0"
+      allow="autoplay; clipboard-write; encrypted-media; fullscreen; picture-in-picture"
+      loading="lazy"
+      title="Spotify Player"
+    ></iframe>
+    {#if masked}
+      <div class="info-mask" aria-hidden="true">
+        <span class="mask-hint">♪</span>
+      </div>
+    {/if}
+  </div>
+{/if}
+
+<style>
+  .embed-container {
+    position: relative;
+    width: 100%;
+    max-width: 400px;
+    border-radius: 12px;
+    overflow: hidden;
+  }
+
+  .embed-container iframe {
+    display: block;
+  }
+
+  .info-mask {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 58%;
+    height: 100%;
+    background: var(--cds-background, #161616);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: default;
+  }
+
+  .mask-hint {
+    font-size: 1.6rem;
+    opacity: 0.3;
+    user-select: none;
+  }
+
+  @media (max-width: 480px) {
+    .embed-container {
+      max-width: 100%;
+    }
+  }
+</style>
diff --git a/frontend/src/lib/config/de.json b/frontend/src/lib/config/de.json
index 7fedc727..5deff2c0 100644
--- a/frontend/src/lib/config/de.json
+++ b/frontend/src/lib/config/de.json
@@ -341,5 +341,19 @@
   "page.hitstar.menu.step2": "Jahr raten",
   "page.hitstar.menu.step3": "Aufdecken",
   "page.hitstar.menu.step4": "10 Runden",
-  "page.hitstar.menu.step5": "Wertung"
+  "page.hitstar.menu.step5": "Wertung",
+  "page.hitstar.tabs.classic": "Klassisch",
+  "page.hitstar.tabs.range": "Zeitraum",
+  "page.hitstar.range.menu.headline": "Der Zeitraum-Modus",
+  "page.hitstar.range.menu.description": "Setze einen Zeitraum von 1 bis 5 Jahren – je schmaler der Bereich, desto mehr Punkte. Max. 50 Punkte!",
+  "page.hitstar.range.menu.step2": "Zeitraum setzen",
+  "page.hitstar.range.menu.bestScoreValue": "{{score}} / 50 am {{date}}",
+  "page.hitstar.range.guessing.cardHint": "In welchem Zeitraum wurde dieser Song veröffentlicht?",
+  "page.hitstar.range.guessing.fromLabel": "Von",
+  "page.hitstar.range.guessing.toLabel": "Bis",
+  "page.hitstar.range.guessing.potentialPoints": "Mögliche Punkte: {{points}}",
+  "page.hitstar.range.guessing.errorFromTo": "\"Bis\" muss größer oder gleich \"Von\" sein.",
+  "page.hitstar.range.guessing.errorRangeSize": "Der Zeitraum darf maximal 5 Jahre umfassen.",
+  "page.hitstar.range.results.yourGuess": "Dein Zeitraum: {{fromYear}}–{{toYear}}",
+  "page.hitstar.range.results.points": "+{{points}} Pkt."
 }
\ No newline at end of file
diff --git a/frontend/src/lib/config/en.json b/frontend/src/lib/config/en.json
index 38e8ad53..20f80127 100644
--- a/frontend/src/lib/config/en.json
+++ b/frontend/src/lib/config/en.json
@@ -341,5 +341,19 @@
   "page.hitstar.menu.step2": "Guess",
   "page.hitstar.menu.step3": "Reveal",
   "page.hitstar.menu.step4": "10 Rounds",
-  "page.hitstar.menu.step5": "Score"
+  "page.hitstar.menu.step5": "Score",
+  "page.hitstar.tabs.classic": "Classic",
+  "page.hitstar.tabs.range": "Range",
+  "page.hitstar.range.menu.headline": "Range Mode",
+  "page.hitstar.range.menu.description": "Set a 1–5 year range – the narrower the range, the more points you earn. Max. 50 points!",
+  "page.hitstar.range.menu.step2": "Set range",
+  "page.hitstar.range.menu.bestScoreValue": "{{score}} / 50 on {{date}}",
+  "page.hitstar.range.guessing.cardHint": "In which year range was this song released?",
+  "page.hitstar.range.guessing.fromLabel": "From",
+  "page.hitstar.range.guessing.toLabel": "To",
+  "page.hitstar.range.guessing.potentialPoints": "Potential points: {{points}}",
+  "page.hitstar.range.guessing.errorFromTo": "\"To\" must be greater than or equal to \"From\".",
+  "page.hitstar.range.guessing.errorRangeSize": "The range may span at most 5 years.",
+  "page.hitstar.range.results.yourGuess": "Your range: {{fromYear}}–{{toYear}}",
+  "page.hitstar.range.results.points": "+{{points}} pts."
 }
\ No newline at end of file
diff --git a/frontend/src/lib/types/spotify.dto.ts b/frontend/src/lib/types/spotify.dto.ts
index 85693230..ffb8c3f6 100644
--- a/frontend/src/lib/types/spotify.dto.ts
+++ b/frontend/src/lib/types/spotify.dto.ts
@@ -14,6 +14,9 @@ export interface HitstarRoundResult {
   track: SpotifyTrackDto;
   guessedYear: number;
   correct: boolean;
+  rangeFrom?: number;
+  rangeTo?: number;
+  pointsEarned?: number;
 }
 
 export interface HitstarBestRound {
diff --git a/frontend/src/lib/util/stores/store-hitstar.ts b/frontend/src/lib/util/stores/store-hitstar.ts
index 58e80fe9..b968bc34 100644
--- a/frontend/src/lib/util/stores/store-hitstar.ts
+++ b/frontend/src/lib/util/stores/store-hitstar.ts
@@ -2,12 +2,28 @@ import { browser } from '$app/environment';
 import type { HitstarBestRound, HitstarGameState } from '$lib/types/spotify.dto';
 import { writable } from 'svelte/store';
 
-const hitstarBestRoundKey = 'hitstar.bestRound';
-const hitstarGameStateKey = 'hitstar.gameState';
+const classicBestRoundKey = 'hitstar.classic.bestRound';
+const classicGameStateKey = 'hitstar.classic.gameState';
+const rangeBestRoundKey = 'hitstar.range.bestRound';
+const rangeGameStateKey = 'hitstar.range.gameState';
 
-const getInitialBestRound = (): HitstarBestRound | null => {
+// Migration: alte Keys auf neue Keys
+if (browser) {
+  const oldBestRound = localStorage.getItem('hitstar.bestRound');
+  if (oldBestRound) {
+    localStorage.setItem(classicBestRoundKey, oldBestRound);
+    localStorage.removeItem('hitstar.bestRound');
+  }
+  const oldGameState = localStorage.getItem('hitstar.gameState');
+  if (oldGameState) {
+    localStorage.setItem(classicGameStateKey, oldGameState);
+    localStorage.removeItem('hitstar.gameState');
+  }
+}
+
+const getInitialBestRound = (key: string): HitstarBestRound | null => {
   if (!browser) return null;
-  const stored = localStorage.getItem(hitstarBestRoundKey);
+  const stored = localStorage.getItem(key);
   if (!stored) return null;
   try {
     return JSON.parse(stored) as HitstarBestRound;
@@ -16,9 +32,9 @@ const getInitialBestRound = (): HitstarBestRound | null => {
   }
 };
 
-const getInitialGameState = (): HitstarGameState | null => {
+const getInitialGameState = (key: string): HitstarGameState | null => {
   if (!browser) return null;
-  const stored = localStorage.getItem(hitstarGameStateKey);
+  const stored = localStorage.getItem(key);
   if (!stored) return null;
   try {
     return JSON.parse(stored) as HitstarGameState;
@@ -27,28 +43,52 @@ const getInitialGameState = (): HitstarGameState | null => {
   }
 };
 
-export const hitstarBestRoundStore = writable<HitstarBestRound | null>(
-  getInitialBestRound(),
+export const hitstarClassicBestRoundStore = writable<HitstarBestRound | null>(
+  getInitialBestRound(classicBestRoundKey),
 );
 
-export const hitstarGameStateStore = writable<HitstarGameState | null>(
-  getInitialGameState(),
+export const hitstarClassicGameStateStore = writable<HitstarGameState | null>(
+  getInitialGameState(classicGameStateKey),
+);
+
+export const hitstarRangeBestRoundStore = writable<HitstarBestRound | null>(
+  getInitialBestRound(rangeBestRoundKey),
+);
+
+export const hitstarRangeGameStateStore = writable<HitstarGameState | null>(
+  getInitialGameState(rangeGameStateKey),
 );
 
 if (browser) {
-  hitstarBestRoundStore.subscribe((val) => {
+  hitstarClassicBestRoundStore.subscribe((val) => {
+    if (val === null) {
+      localStorage.removeItem(classicBestRoundKey);
+    } else {
+      localStorage.setItem(classicBestRoundKey, JSON.stringify(val));
+    }
+  });
+
+  hitstarClassicGameStateStore.subscribe((val) => {
+    if (val === null) {
+      localStorage.removeItem(classicGameStateKey);
+    } else {
+      localStorage.setItem(classicGameStateKey, JSON.stringify(val));
+    }
+  });
+
+  hitstarRangeBestRoundStore.subscribe((val) => {
     if (val === null) {
-      localStorage.removeItem(hitstarBestRoundKey);
+      localStorage.removeItem(rangeBestRoundKey);
     } else {
-      localStorage.setItem(hitstarBestRoundKey, JSON.stringify(val));
+      localStorage.setItem(rangeBestRoundKey, JSON.stringify(val));
     }
   });
 
-  hitstarGameStateStore.subscribe((val) => {
+  hitstarRangeGameStateStore.subscribe((val) => {
     if (val === null) {
-      localStorage.removeItem(hitstarGameStateKey);
+      localStorage.removeItem(rangeGameStateKey);
     } else {
-      localStorage.setItem(hitstarGameStateKey, JSON.stringify(val));
+      localStorage.setItem(rangeGameStateKey, JSON.stringify(val));
     }
   });
 }
diff --git a/frontend/src/lib/util/translations.ts b/frontend/src/lib/util/translations.ts
index f4bc3c54..10d7bd6c 100644
--- a/frontend/src/lib/util/translations.ts
+++ b/frontend/src/lib/util/translations.ts
@@ -16,6 +16,9 @@ interface Params {
   round: string;
   year: string;
   date: string;
+  fromYear: string;
+  toYear: string;
+  points: string;
 }
 
 const config: Config<Partial<Params>> = {

From 8b3a46faa6cfb96479fa6f598106a5aaf4b8bc1d Mon Sep 17 00:00:00 2001
From: timlohse1104 <tim-lohse@gmx.de>
Date: Sat, 14 Mar 2026 17:27:24 +0100
Subject: [PATCH 05/11] =?UTF-8?q?=F0=9F=90=9B=20Fix=20Carbon=20Tabs=20mobi?=
 =?UTF-8?q?le=20layout=20and=20replace=20Spotify=20embed=20with=20iFrame?=
 =?UTF-8?q?=20API=20player.?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 CHANGELOG.md                                  |   3 +-
 .../src/lib/components/hitstar/Hitstar.svelte |  43 +++-
 .../hitstar/HitstarSpotifyEmbed.svelte        | 210 +++++++++++++++---
 3 files changed, 217 insertions(+), 39 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index aa26d4d8..bcd7ea29 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -10,8 +10,9 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 - [backend] Auto-seed toggles on application startup: missing toggles are created with default values from config; existing toggles are never overwritten.
 - [hitstar] Add animated step-card tutorial in the menu that loops through 5 game steps with icons and auto-highlights each card every 2 seconds.
-- [hitstar] Multi-mode architecture with Carbon Tabs (horizontal, no dropdown) for mode selection on the Hitstar start page.
+- [hitstar] Multi-mode architecture with Carbon Tabs (horizontal, compact, centered, no dropdown on any viewport) with spacing below for mode selection on the Hitstar start page.
 - [hitstar] New "Range" game mode: set a 1–5 year range instead of guessing exactly; narrower ranges earn more points (max 50).
+- [hitstar] Replace Spotify iframe embed in guessing phase with Spotify iFrame API: hidden iframe controlled by custom Play/Pause and Replay buttons for a clean, maskless player UI.
 
 ### Changed
 
diff --git a/frontend/src/lib/components/hitstar/Hitstar.svelte b/frontend/src/lib/components/hitstar/Hitstar.svelte
index 1aeeaab1..092a063a 100644
--- a/frontend/src/lib/components/hitstar/Hitstar.svelte
+++ b/frontend/src/lib/components/hitstar/Hitstar.svelte
@@ -52,20 +52,57 @@
 
   .hitstar-container :global(.bx--tabs__nav--hidden) {
     display: flex !important;
+    flex-direction: row !important;
+    max-height: unset !important;
+    overflow: visible !important;
+    position: static !important;
   }
 
-  /* Full-width tab nav */
+  /* Full-width tab container, nav centered and only as wide as its items */
   .hitstar-container :global(.bx--tabs) {
     width: 100%;
+    display: flex;
+    justify-content: center;
   }
 
   .hitstar-container :global(.bx--tabs__nav) {
-    width: 100%;
+    width: fit-content;
+  }
+
+  .hitstar-container :global(.bx--tabs__nav-item) {
+    display: flex !important;
+    flex: unset;
+  }
+
+  /* Active tab indicator (Carbon hides selected item on mobile by default) */
+  .hitstar-container :global(.bx--tabs__nav-item--selected .bx--tabs__nav-link) {
+    border-bottom: 2px solid var(--cds-interactive-04, #0f62fe) !important;
+    color: var(--cds-text-01, #f4f4f4) !important;
+    font-weight: 600;
+  }
+
+  /* Remove focus ring on tab links — selection shown by bottom border only */
+  .hitstar-container :global(.bx--tabs__nav-link:focus),
+  .hitstar-container :global(.bx--tabs__nav-link:active) {
+    outline: none;
+    box-shadow: none;
+  }
+
+  /* Prevent Carbon from resizing tab links on focus/active on mobile
+     (Carbon sets width:100%, padding-left:16px, margin:0 which causes visual shift) */
+  @media (max-width: 41.9375rem) {
+    .hitstar-container :global(.bx--tabs__nav-link:focus),
+    .hitstar-container :global(.bx--tabs__nav-link:active) {
+      width: calc(100% - 32px) !important;
+      padding-left: 0 !important;
+      margin: 0 var(--cds-spacing-05, 1rem) !important;
+    }
   }
 
-  /* TabContent padding */
+  /* Margin between tab bar and mode content */
   .hitstar-container :global(.bx--tab-content) {
     padding: 0;
+    margin-top: calc(2 * var(--default_padding));
   }
 
   /* Hide tabs during active game */
diff --git a/frontend/src/lib/components/hitstar/HitstarSpotifyEmbed.svelte b/frontend/src/lib/components/hitstar/HitstarSpotifyEmbed.svelte
index 9452cf25..9de664cf 100644
--- a/frontend/src/lib/components/hitstar/HitstarSpotifyEmbed.svelte
+++ b/frontend/src/lib/components/hitstar/HitstarSpotifyEmbed.svelte
@@ -1,65 +1,205 @@
 <script lang="ts">
+  // 1. IMPORTS
+  import { onMount, onDestroy } from 'svelte';
+  import PauseFilled from 'carbon-icons-svelte/lib/PauseFilled.svelte';
+  import PlayFilledAlt from 'carbon-icons-svelte/lib/PlayFilledAlt.svelte';
+  import Reset from 'carbon-icons-svelte/lib/Reset.svelte';
+
   // 2. PROPS
   let { trackId, masked }: { trackId: string; masked: boolean } = $props();
 
+  // 4. STATE
+  let embedEl: HTMLElement;
+  let controller: any = null;
+  let isPlaying = $state(false);
+  let isReady = $state(false);
+
   // 5. DERIVED
   const embedUrl = $derived(
     `https://open.spotify.com/embed/track/${trackId}?utm_source=generator&theme=0`,
   );
+
+  // 7. LIFECYCLE
+  onMount(async () => {
+    if (!masked) return;
+    const IFrameAPI = await initSpotifyAPI();
+    IFrameAPI.createController(
+      embedEl,
+      { uri: `spotify:track:${trackId}`, width: 300, height: 80 },
+      (ctrl: any) => {
+        controller = ctrl;
+        // Enable buttons only after the player signals it is ready to stream
+        ctrl.addListener('ready', () => {
+          isReady = true;
+        });
+        ctrl.addListener('playback_update', (e: any) => {
+          isPlaying = !e.data.isPaused;
+        });
+      },
+    );
+  });
+
+  onDestroy(() => {
+    controller?.destroy?.();
+  });
+
+  // 8. FUNCTIONS
+  const initSpotifyAPI = (): Promise<any> =>
+    new Promise((resolve) => {
+      const w = window as any;
+      if (w._spotifyIFrameAPI) {
+        resolve(w._spotifyIFrameAPI);
+        return;
+      }
+      const prev = w.onSpotifyIframeApiReady;
+      w.onSpotifyIframeApiReady = (api: any) => {
+        w._spotifyIFrameAPI = api;
+        if (prev) prev(api);
+        resolve(api);
+      };
+      if (!document.getElementById('spotify-iframe-api')) {
+        const s = document.createElement('script');
+        s.id = 'spotify-iframe-api';
+        s.src = 'https://open.spotify.com/embed/iframe-api/v1';
+        s.async = true;
+        document.head.appendChild(s);
+      }
+    });
+
+  const togglePlay = () => {
+    if (!controller) return;
+    if (isPlaying) controller.pause();
+    else controller.play();
+  };
+
+  const replay = () => {
+    if (!controller) return;
+    controller.seek(0);
+    controller.resume();
+  };
 </script>
 
 {#if trackId}
-  <div class="embed-container">
-    <iframe
-      src={embedUrl}
-      width="100%"
-      height="80"
-      frameborder="0"
-      allow="autoplay; clipboard-write; encrypted-media; fullscreen; picture-in-picture"
-      loading="lazy"
-      title="Spotify Player"
-    ></iframe>
-    {#if masked}
-      <div class="info-mask" aria-hidden="true">
-        <span class="mask-hint">♪</span>
-      </div>
-    {/if}
-  </div>
+  {#if masked}
+    <!-- Wrapper hält position: fixed aufrecht — Spotify API kann nur das innere div verändern -->
+    <div class="hidden-embed-wrapper">
+      <div bind:this={embedEl}></div>
+    </div>
+    <div class="player-controls">
+      <button
+        class="ctrl-btn ctrl-play"
+        onclick={togglePlay}
+        disabled={!isReady}
+        aria-label={isPlaying ? 'Pause' : 'Play'}
+      >
+        {#if isPlaying}
+          <PauseFilled size={32} />
+        {:else}
+          <PlayFilledAlt size={32} />
+        {/if}
+      </button>
+      <button class="ctrl-btn ctrl-replay" onclick={replay} disabled={!isReady} aria-label="Replay">
+        <Reset size={24} />
+      </button>
+    </div>
+  {:else}
+    <div class="embed-container">
+      <iframe
+        src={embedUrl}
+        width="100%"
+        height="80"
+        frameborder="0"
+        allow="autoplay; clipboard-write; encrypted-media; fullscreen; picture-in-picture"
+        loading="lazy"
+        title="Spotify Player"
+      ></iframe>
+    </div>
+  {/if}
 {/if}
 
 <style>
-  .embed-container {
-    position: relative;
-    width: 100%;
-    max-width: 400px;
-    border-radius: 12px;
+  /* Wrapper ist opacity:0 — iframe bleibt in normalem Render-Kontext,
+     Chrome throttelt keinen Audio aus sichtbaren iframes */
+  .hidden-embed-wrapper {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 300px;
+    height: 80px;
+    opacity: 0;
     overflow: hidden;
+    pointer-events: none;
+    z-index: -1;
   }
 
-  .embed-container iframe {
-    display: block;
+  /* Custom player controls bar */
+  .player-controls {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 1rem;
+    width: 100%;
+    max-width: 400px;
+    height: 80px;
+    background: var(--cds-layer-01, #262626);
+    border-radius: 12px;
   }
 
-  .info-mask {
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 58%;
-    height: 100%;
-    background: var(--cds-background, #161616);
+  .ctrl-btn {
     display: flex;
     align-items: center;
     justify-content: center;
-    cursor: default;
+    border: none;
+    border-radius: 50%;
+    cursor: pointer;
+    color: var(--cds-text-primary, #f4f4f4);
+    transition:
+      opacity 0.15s,
+      transform 0.1s;
+  }
+
+  .ctrl-btn:disabled {
+    opacity: 0.35;
+    cursor: not-allowed;
+  }
+
+  .ctrl-btn:not(:disabled):hover {
+    opacity: 0.85;
+  }
+
+  .ctrl-btn:not(:disabled):active {
+    transform: scale(0.92);
   }
 
-  .mask-hint {
-    font-size: 1.6rem;
-    opacity: 0.3;
-    user-select: none;
+  /* Large Play/Pause button */
+  .ctrl-play {
+    width: 52px;
+    height: 52px;
+    background: var(--cds-interactive-01, #0f62fe);
+  }
+
+  /* Smaller Replay button */
+  .ctrl-replay {
+    width: 40px;
+    height: 40px;
+    background: var(--cds-layer-02, #393939);
+  }
+
+  /* Reveal-phase: full Spotify embed */
+  .embed-container {
+    position: relative;
+    width: 100%;
+    max-width: 400px;
+    border-radius: 12px;
+    overflow: hidden;
+  }
+
+  .embed-container iframe {
+    display: block;
   }
 
   @media (max-width: 480px) {
+    .player-controls,
     .embed-container {
       max-width: 100%;
     }

From cd6f99985a5f2d3f5e69dfd1d8ac7d4f1ca90418 Mon Sep 17 00:00:00 2001
From: timlohse1104 <tim-lohse@gmx.de>
Date: Sat, 14 Mar 2026 17:50:02 +0100
Subject: [PATCH 06/11] =?UTF-8?q?=F0=9F=90=9B=20Fix=20Spotify=20PlaybackEr?=
 =?UTF-8?q?ror=20after=20preview=20end=20and=20Range=20NumberInput=20displ?=
 =?UTF-8?q?ay.?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 CHANGELOG.md                                       |  6 ++++++
 .../src/lib/components/hitstar/HitstarRange.svelte | 11 +++++++++--
 .../components/hitstar/HitstarSpotifyEmbed.svelte  | 14 ++++++++++----
 3 files changed, 25 insertions(+), 6 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index bcd7ea29..abb7f671 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -14,6 +14,12 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - [hitstar] New "Range" game mode: set a 1–5 year range instead of guessing exactly; narrower ranges earn more points (max 50).
 - [hitstar] Replace Spotify iframe embed in guessing phase with Spotify iFrame API: hidden iframe controlled by custom Play/Pause and Replay buttons for a clean, maskless player UI.
 
+### Fixed
+
+- [hitstar] Spotify iFrame API player no longer throws PlaybackError after the 30-second preview ends; clicking Play or Replay reloads the track via `loadUri` and starts playback automatically.
+- [hitstar] Range mode NumberInput fields now correctly display the default value (2000) by overriding Carbon's oversized `padding-right` that was truncating the 4-digit year.
+- [hitstar] CSS selector for Range submit button narrowed from `:global(button)` to `:global(button.bx--btn)` to prevent accidentally resizing the NumberInput stepper buttons.
+
 ### Changed
 
 - [hitstar] Refactored Hitstar into shell + separate mode components (HitstarClassic, HitstarRange) with shared sub-components (HitstarRoundTracker, HitstarGameTopBar, HitstarLoadingScreen, HitstarResultsScreen).
diff --git a/frontend/src/lib/components/hitstar/HitstarRange.svelte b/frontend/src/lib/components/hitstar/HitstarRange.svelte
index aa26a5cf..409a344d 100644
--- a/frontend/src/lib/components/hitstar/HitstarRange.svelte
+++ b/frontend/src/lib/components/hitstar/HitstarRange.svelte
@@ -435,7 +435,14 @@
     min-width: 0;
   }
 
-  .range-input-row :global(button) {
+  /* Carbon sets padding-right: 8rem (128px) for NumberInput controls — too large when inputs
+     are side-by-side. Override to ~4.5rem to accommodate the 2×2rem stepper buttons. */
+  .range-input-row :global(.bx--number input[type='number']) {
+    padding-right: 4.5rem;
+  }
+
+  /* Target only the Carbon submit Button (.bx--btn), not the NumberInput steppers (.bx--number__control-btn) */
+  .range-input-row :global(button.bx--btn) {
     height: 2.5rem;
     width: 2.5rem;
     min-height: unset;
@@ -446,7 +453,7 @@
     padding: 0;
   }
 
-  .range-input-row :global(button svg) {
+  .range-input-row :global(button.bx--btn svg) {
     margin: 0;
     position: static;
   }
diff --git a/frontend/src/lib/components/hitstar/HitstarSpotifyEmbed.svelte b/frontend/src/lib/components/hitstar/HitstarSpotifyEmbed.svelte
index 9de664cf..27f05290 100644
--- a/frontend/src/lib/components/hitstar/HitstarSpotifyEmbed.svelte
+++ b/frontend/src/lib/components/hitstar/HitstarSpotifyEmbed.svelte
@@ -68,14 +68,20 @@
 
   const togglePlay = () => {
     if (!controller) return;
-    if (isPlaying) controller.pause();
-    else controller.play();
+    try {
+      if (isPlaying) controller.pause();
+      else controller.play();
+    } catch {
+      // Preview ended and track was unloaded — reload and auto-play
+      isPlaying = false;
+      controller.loadUri(`spotify:track:${trackId}`, true, 0);
+    }
   };
 
   const replay = () => {
     if (!controller) return;
-    controller.seek(0);
-    controller.resume();
+    // loadUri reloads the 30-second preview and starts playback immediately
+    controller.loadUri(`spotify:track:${trackId}`, true, 0);
   };
 </script>
 

From 0ebbe86cc76ce0a059cb324c765c6d657f47779f Mon Sep 17 00:00:00 2001
From: timlohse1104 <tim-lohse@gmx.de>
Date: Sun, 15 Mar 2026 00:55:27 +0100
Subject: [PATCH 07/11] =?UTF-8?q?=F0=9F=9A=9A=20Remove=20Spotify=20embed?=
 =?UTF-8?q?=20from=20reveal=20phase=20and=20add=20mode=20label=20to=20Hits?=
 =?UTF-8?q?tar=20UI.?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 CHANGELOG.md                                           |  6 ++++++
 frontend/src/lib/components/hitstar/Hitstar.svelte     | 10 ++++++++++
 .../src/lib/components/hitstar/HitstarClassic.svelte   |  1 -
 .../src/lib/components/hitstar/HitstarRange.svelte     |  1 -
 4 files changed, 16 insertions(+), 2 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index abb7f671..d306a54c 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -8,6 +8,12 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Added
 
+- [hitstar] Show current game mode (Classic / Range) as small grey label top-left, always visible even when tabs are hidden during active game.
+
+### Changed
+
+- [hitstar] Remove Spotify embed (full iframe) from the reveal phase; only round tracker, abort button, flipped track card and next-round button are shown after guessing.
+
 - [backend] Auto-seed toggles on application startup: missing toggles are created with default values from config; existing toggles are never overwritten.
 - [hitstar] Add animated step-card tutorial in the menu that loops through 5 game steps with icons and auto-highlights each card every 2 seconds.
 - [hitstar] Multi-mode architecture with Carbon Tabs (horizontal, compact, centered, no dropdown on any viewport) with spacing below for mode selection on the Hitstar start page.
diff --git a/frontend/src/lib/components/hitstar/Hitstar.svelte b/frontend/src/lib/components/hitstar/Hitstar.svelte
index 092a063a..fd753349 100644
--- a/frontend/src/lib/components/hitstar/Hitstar.svelte
+++ b/frontend/src/lib/components/hitstar/Hitstar.svelte
@@ -20,6 +20,9 @@
 
 {#if $initialized}
   <div class="hitstar-container" class:game-active={gameActive}>
+    <p class="mode-label">
+      {selectedTab === 0 ? $t('page.hitstar.tabs.classic') : $t('page.hitstar.tabs.range')}
+    </p>
     <Tabs bind:selected={selectedTab}>
       <Tab label={$t('page.hitstar.tabs.classic')} />
       <Tab label={$t('page.hitstar.tabs.range')} />
@@ -45,6 +48,13 @@
     width: 100%;
   }
 
+  .mode-label {
+    align-self: flex-start;
+    font-size: 0.75rem;
+    color: var(--cds-text-helper, #6f6f6f);
+    margin: 0 0 0.25rem;
+  }
+
   /* Tabs always visible as horizontal bar, no dropdown */
   .hitstar-container :global(.bx--tabs-trigger) {
     display: none;
diff --git a/frontend/src/lib/components/hitstar/HitstarClassic.svelte b/frontend/src/lib/components/hitstar/HitstarClassic.svelte
index 54b1ac1d..281a15ea 100644
--- a/frontend/src/lib/components/hitstar/HitstarClassic.svelte
+++ b/frontend/src/lib/components/hitstar/HitstarClassic.svelte
@@ -280,7 +280,6 @@
       <div class:shake={isShaking}>
         <HitstarCard flipped={isCardFlipped} track={currentTrack} correct={isCorrect} />
       </div>
-      <HitstarSpotifyEmbed trackId={currentTrack?.id ?? ''} masked={false} />
     </div>
 
     <div class="bottom-action">
diff --git a/frontend/src/lib/components/hitstar/HitstarRange.svelte b/frontend/src/lib/components/hitstar/HitstarRange.svelte
index 409a344d..d05f3e3b 100644
--- a/frontend/src/lib/components/hitstar/HitstarRange.svelte
+++ b/frontend/src/lib/components/hitstar/HitstarRange.svelte
@@ -335,7 +335,6 @@
       <div class:shake={isShaking}>
         <HitstarCard flipped={isCardFlipped} track={currentTrack} correct={isCorrect} />
       </div>
-      <HitstarSpotifyEmbed trackId={currentTrack?.id ?? ''} masked={false} />
     </div>
 
     <div class="bottom-action">

From 4d3751a99619e2acd9ce138e23312f187edec406 Mon Sep 17 00:00:00 2001
From: timlohse1104 <tim-lohse@gmx.de>
Date: Sun, 15 Mar 2026 01:22:46 +0100
Subject: [PATCH 08/11] =?UTF-8?q?=F0=9F=9A=80=20Hide=20game=20mode=20label?=
 =?UTF-8?q?=20in=20main=20menu=20and=20show=20it=20only=20during=20active?=
 =?UTF-8?q?=20game.?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 CHANGELOG.md                                       | 2 +-
 frontend/src/lib/components/hitstar/Hitstar.svelte | 8 +++++---
 2 files changed, 6 insertions(+), 4 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index d306a54c..4ea33700 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -8,7 +8,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Added
 
-- [hitstar] Show current game mode (Classic / Range) as small grey label top-left, always visible even when tabs are hidden during active game.
+- [hitstar] Show current game mode (Classic / Range) as small grey label top-left, only visible during an active game (hidden in the main menu).
 
 ### Changed
 
diff --git a/frontend/src/lib/components/hitstar/Hitstar.svelte b/frontend/src/lib/components/hitstar/Hitstar.svelte
index fd753349..8a8db668 100644
--- a/frontend/src/lib/components/hitstar/Hitstar.svelte
+++ b/frontend/src/lib/components/hitstar/Hitstar.svelte
@@ -20,9 +20,11 @@
 
 {#if $initialized}
   <div class="hitstar-container" class:game-active={gameActive}>
-    <p class="mode-label">
-      {selectedTab === 0 ? $t('page.hitstar.tabs.classic') : $t('page.hitstar.tabs.range')}
-    </p>
+    {#if gameActive}
+      <p class="mode-label">
+        {selectedTab === 0 ? $t('page.hitstar.tabs.classic') : $t('page.hitstar.tabs.range')}
+      </p>
+    {/if}
     <Tabs bind:selected={selectedTab}>
       <Tab label={$t('page.hitstar.tabs.classic')} />
       <Tab label={$t('page.hitstar.tabs.range')} />

From 5d226f6eca742b23c3c0ca394223e12ffbc90dd4 Mon Sep 17 00:00:00 2001
From: timlohse1104 <tim-lohse@gmx.de>
Date: Sun, 15 Mar 2026 01:46:18 +0100
Subject: [PATCH 09/11] =?UTF-8?q?=F0=9F=90=9B=20Fix=20mobile=20card=20meta?=
 =?UTF-8?q?data=20overflow=20and=20randomize=20Spotify=20search=20year=20p?=
 =?UTF-8?q?er=20request.?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 CHANGELOG.md                                           | 2 ++
 backend/libs/hitstar/src/lib/hitstar.service.ts        | 5 +++--
 frontend/src/lib/components/hitstar/HitstarCard.svelte | 6 ++++++
 3 files changed, 11 insertions(+), 2 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 4ea33700..bcaf44e2 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -13,6 +13,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ### Changed
 
 - [hitstar] Remove Spotify embed (full iframe) from the reveal phase; only round tracker, abort button, flipped track card and next-round button are shown after guessing.
+- [hitstar] Spotify track search now uses a single random year (1955–2025) per request instead of a fixed range to improve year distribution across decades.
 
 - [backend] Auto-seed toggles on application startup: missing toggles are created with default values from config; existing toggles are never overwritten.
 - [hitstar] Add animated step-card tutorial in the menu that loops through 5 game steps with icons and auto-highlights each card every 2 seconds.
@@ -22,6 +23,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Fixed
 
+- [hitstar] Album cover on the track card is now smaller on mobile viewports so all metadata (title, artist, album, year) fits within the card bounds without being clipped.
 - [hitstar] Spotify iFrame API player no longer throws PlaybackError after the 30-second preview ends; clicking Play or Replay reloads the track via `loadUri` and starts playback automatically.
 - [hitstar] Range mode NumberInput fields now correctly display the default value (2000) by overriding Carbon's oversized `padding-right` that was truncating the 4-digit year.
 - [hitstar] CSS selector for Range submit button narrowed from `:global(button)` to `:global(button.bx--btn)` to prevent accidentally resizing the NumberInput stepper buttons.
diff --git a/backend/libs/hitstar/src/lib/hitstar.service.ts b/backend/libs/hitstar/src/lib/hitstar.service.ts
index 90c9a2e0..35109f72 100644
--- a/backend/libs/hitstar/src/lib/hitstar.service.ts
+++ b/backend/libs/hitstar/src/lib/hitstar.service.ts
@@ -51,7 +51,7 @@ export class HitstarService {
     const maxAttempts = 10;
 
     for (let attempt = 0; attempt < maxAttempts; attempt++) {
-      const offset = Math.floor(Math.random() * 950);
+      const offset = Math.floor(Math.random() * 100);
       const token = await this.getAccessToken();
 
       this.logger.log(
@@ -59,7 +59,8 @@ export class HitstarService {
       );
 
       try {
-        const searchUrl = `https://api.spotify.com/v1/search?q=*+year%3A1950-2025&type=track&market=DE&limit=10&offset=${offset}`;
+        const year = 1955 + Math.floor(Math.random() * (2025 - 1955 + 1));
+        const searchUrl = `https://api.spotify.com/v1/search?q=*+year%3A${year}&type=track&market=DE&limit=10&offset=${offset}`;
         this.logger.log(`Fetching URL: ${searchUrl}`);
         const response = await firstValueFrom(
           this.httpService.get(searchUrl, {
diff --git a/frontend/src/lib/components/hitstar/HitstarCard.svelte b/frontend/src/lib/components/hitstar/HitstarCard.svelte
index 6b1dc4b4..716dac90 100644
--- a/frontend/src/lib/components/hitstar/HitstarCard.svelte
+++ b/frontend/src/lib/components/hitstar/HitstarCard.svelte
@@ -165,6 +165,12 @@
       font-size: 4rem;
     }
 
+    .album-cover {
+      width: min(90px, 28vw);
+      height: min(90px, 28vw);
+      margin-bottom: 0.25rem;
+    }
+
     .track-name {
       font-size: 0.85rem;
     }

From cccf7515e6b94d464b60551cb31f1b7625c91829 Mon Sep 17 00:00:00 2001
From: timlohse1104 <tim-lohse@gmx.de>
Date: Sun, 15 Mar 2026 02:04:35 +0100
Subject: [PATCH 10/11] =?UTF-8?q?=E2=9C=A8=20Add=20genre:pop=20filter=20to?=
 =?UTF-8?q?=20Spotify=20search=20to=20surface=20more=20recognizable=20trac?=
 =?UTF-8?q?ks.?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 CHANGELOG.md                                    | 1 +
 backend/libs/hitstar/src/lib/hitstar.service.ts | 5 ++++-
 2 files changed, 5 insertions(+), 1 deletion(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index bcaf44e2..50a57778 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -14,6 +14,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 - [hitstar] Remove Spotify embed (full iframe) from the reveal phase; only round tracker, abort button, flipped track card and next-round button are shown after guessing.
 - [hitstar] Spotify track search now uses a single random year (1955–2025) per request instead of a fixed range to improve year distribution across decades.
+- [hitstar] Add `genre:pop` filter to Spotify search query to increase the share of well-known tracks.
 
 - [backend] Auto-seed toggles on application startup: missing toggles are created with default values from config; existing toggles are never overwritten.
 - [hitstar] Add animated step-card tutorial in the menu that loops through 5 game steps with icons and auto-highlights each card every 2 seconds.
diff --git a/backend/libs/hitstar/src/lib/hitstar.service.ts b/backend/libs/hitstar/src/lib/hitstar.service.ts
index 35109f72..c60812a2 100644
--- a/backend/libs/hitstar/src/lib/hitstar.service.ts
+++ b/backend/libs/hitstar/src/lib/hitstar.service.ts
@@ -4,6 +4,9 @@ import { Injectable, Logger } from '@nestjs/common';
 import { ConfigService } from '@nestjs/config';
 import { firstValueFrom } from 'rxjs';
 
+// Available spotify genres
+// acoustic, afrobeat, alt-rock, alternative, ambient, anime, black-metal, bluegrass, blues, bossanova, brazil, breakbeat, british, cantopop, chicago-house, children, chill, classical, club, comedy, country, dance, dancehall, death-metal, deep-house, detroit-techno, disco, disney, drum-and-bass, dub, dubstep, edm, electro, electronic, emo, folk, forro, french, funk, garage, german, gospel, goth, grindcore, groove, grunge, guitar, happy, hard-rock, hardcore, hardstyle, heavy-metal, hip-hop, holidays, honky-tonk, house, idm, indian, indie, indie-pop, industrial, iranian, j-dance, j-idol, j-pop, j-rock, jazz, k-pop, kids, latin, latino, malay, mandopop, metal, metal-misc, metalcore, minimal-techno, movies, mpb, new-age, new-release, opera, pagode, party, philippines-opm, piano, pop, pop-film, post-dubstep, power-pop, progressive-house, psych-rock, punk, punk-rock, r-n-b, rainy-day, reggae, reggaeton, road-trip, rock, rock-n-roll, rockabilly, romance, sad, salsa, samba, sertanejo, show-tunes, singer-songwriter, ska, sleep, songwriter, soul, soundtracks, spanish, study, summer, swedish, synth-pop, tango, techno, trance, trip-hop, turkish, work-out, world-music
+
 @Injectable()
 export class HitstarService {
   private readonly logger = new Logger(HitstarService.name);
@@ -60,7 +63,7 @@ export class HitstarService {
 
       try {
         const year = 1955 + Math.floor(Math.random() * (2025 - 1955 + 1));
-        const searchUrl = `https://api.spotify.com/v1/search?q=*+year%3A${year}&type=track&market=DE&limit=10&offset=${offset}`;
+        const searchUrl = `https://api.spotify.com/v1/search?q=*+year%3A${year}+genre%3Apop&type=track&market=DE&limit=10&offset=${offset}`;
         this.logger.log(`Fetching URL: ${searchUrl}`);
         const response = await firstValueFrom(
           this.httpService.get(searchUrl, {

From e19f0ba84225d7d4de6079aadb4b4f8d8c4dd250 Mon Sep 17 00:00:00 2001
From: timlohse1104 <tim-lohse@gmx.de>
Date: Sun, 15 Mar 2026 14:54:31 +0100
Subject: [PATCH 11/11] =?UTF-8?q?=F0=9F=9A=80=20Require=20explicit=20"New?=
 =?UTF-8?q?=20Game"=20click=20to=20start=20a=20round=20instead=20of=20auto?=
 =?UTF-8?q?-resuming=20on=20mount.?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 CHANGELOG.md                                              | 1 +
 frontend/src/lib/components/hitstar/HitstarClassic.svelte | 7 ++-----
 frontend/src/lib/components/hitstar/HitstarRange.svelte   | 7 ++-----
 3 files changed, 5 insertions(+), 10 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 50a57778..43294dbe 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -24,6 +24,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Fixed
 
+- [hitstar] Clicking a game mode tab no longer auto-starts a round; the menu always stays visible after page load or tab switch, and only "New Game" triggers the game.
 - [hitstar] Album cover on the track card is now smaller on mobile viewports so all metadata (title, artist, album, year) fits within the card bounds without being clipped.
 - [hitstar] Spotify iFrame API player no longer throws PlaybackError after the 30-second preview ends; clicking Play or Replay reloads the track via `loadUri` and starts playback automatically.
 - [hitstar] Range mode NumberInput fields now correctly display the default value (2000) by overriding Carbon's oversized `padding-right` that was truncating the 4-digit year.
diff --git a/frontend/src/lib/components/hitstar/HitstarClassic.svelte b/frontend/src/lib/components/hitstar/HitstarClassic.svelte
index 281a15ea..25d38a6f 100644
--- a/frontend/src/lib/components/hitstar/HitstarClassic.svelte
+++ b/frontend/src/lib/components/hitstar/HitstarClassic.svelte
@@ -78,10 +78,7 @@
       score = savedGameState.score;
       currentTrack = savedGameState.currentTrack;
       roundResults = savedGameState.roundResults;
-      if (currentTrack) {
-        isCardFlipped = false;
-        gameState = 'GUESSING';
-      }
+      isCardFlipped = false;
     }
   });
 
@@ -217,7 +214,7 @@
         title={$t('page.hitstar.menu.resumeInfo')}
         hideCloseButton
       />
-      <Button on:click={startGame} kind="secondary">{$t('page.hitstar.menu.startGame')}</Button>
+      <Button on:click={() => { gameState = 'GUESSING'; }} kind="secondary">{$t('page.hitstar.menu.startGame')}</Button>
     {:else}
       <Button on:click={startGame}>{$t('page.hitstar.menu.startGame')}</Button>
     {/if}
diff --git a/frontend/src/lib/components/hitstar/HitstarRange.svelte b/frontend/src/lib/components/hitstar/HitstarRange.svelte
index d05f3e3b..60013e05 100644
--- a/frontend/src/lib/components/hitstar/HitstarRange.svelte
+++ b/frontend/src/lib/components/hitstar/HitstarRange.svelte
@@ -82,10 +82,7 @@
       score = savedGameState.score;
       currentTrack = savedGameState.currentTrack;
       roundResults = savedGameState.roundResults;
-      if (currentTrack) {
-        isCardFlipped = false;
-        gameState = 'GUESSING';
-      }
+      isCardFlipped = false;
     }
   });
 
@@ -255,7 +252,7 @@
         title={$t('page.hitstar.menu.resumeInfo')}
         hideCloseButton
       />
-      <Button on:click={startGame} kind="secondary">{$t('page.hitstar.menu.startGame')}</Button>
+      <Button on:click={() => { gameState = 'GUESSING'; }} kind="secondary">{$t('page.hitstar.menu.startGame')}</Button>
     {:else}
       <Button on:click={startGame}>{$t('page.hitstar.menu.startGame')}</Button>
     {/if}