diff --git a/src/CiselnaVyprava/Components/BattleArena.razor b/src/CiselnaVyprava/Components/BattleArena.razor
index 9621c4f..9c54d1d 100644
--- a/src/CiselnaVyprava/Components/BattleArena.razor
+++ b/src/CiselnaVyprava/Components/BattleArena.razor
@@ -1,61 +1,61 @@
+@inject IGameDataLoader DataLoader
 @inject IBattleEngine BattleEngine
-@inject ILocalStorageService Storage
-@inject NavigationManager Nav
 
-<div class="battle-arena-wrapper" tabindex="0" @ref="arenaElement" @onkeydown="HandleKeyDown" autofocus>
-    <!-- Top Header / Bar -->
+<div class="battle-arena-wrapper" tabindex="0" @onkeydown="HandleKeyDown" @ref="arenaElement">
+    <!-- Top HUD / Level Info -->
     <div class="battle-header">
-
         <button class="btn-back" @onclick="GoBackToMap">⬅ Mapa</button>
         <div class="level-info">
             <span class="world-title">@CurrentLevel.Name</span>
             @if (CurrentLevel.IsBoss)
             {
-                <span class="boss-badge">👑 BOSS</span>
+                <span class="boss-badge">👑 BOSS SÚBOJ</span>
             }
         </div>
         <div class="combo-counter @(State.ComboStreak > 1 ? "active-streak" : "")">
-            🔥 Kombo: <strong>@State.ComboStreak</strong>
+            🔥 Séria: <strong>@State.ComboStreak</strong>
         </div>
     </div>
 
-    <!-- Feedback / Toast Banner -->
-    @if (!string.IsNullOrEmpty(State.LastFeedbackMessage))
+    <!-- Dynamic Feedback Banner -->
+    @if (!string.IsNullOrEmpty(State.LastFeedbackMessage) && !State.IsBattleOver)
     {
-        <div class="feedback-banner @GetFeedbackClass()">
+        <div class="feedback-banner @GetFeedbackClass() anim-fade-in">
             @State.LastFeedbackMessage
         </div>
     }
 
-    <!-- Main Combat Arena -->
-    <div class="arena-stage" style="background: linear-gradient(rgba(0,0,0,0.15), rgba(0,0,0,0.35)), url('assets/images/backgrounds/world1_meadow.jpg') center/cover no-repeat;">
-        <!-- Player Side -->
-
-        <div class="combatant player-side @GetPlayerAnimationClass()">
+    <!-- Visual Combat Stage with Dynamic World Background -->
+    <div class="arena-stage" style="background: linear-gradient(rgba(0,0,0,0.35), rgba(0,0,0,0.45)), url('@BackgroundImage') center/cover no-repeat;">
+        <!-- Hero Side -->
+        <div class="combatant hero-side @GetPlayerAnimationClass()">
             <div class="combatant-info">
                 <span class="combatant-name">@Hero.Name</span>
                 <div class="hp-hearts">
-                    @for (int i = 1; i <= State.PlayerMaxHp; i++)
+                    @for (int i = 0; i < State.PlayerMaxHp; i++)
                     {
-                        <span class="heart @(i <= State.PlayerCurrentHp ? "full" : "empty")">
-                            @(i <= State.PlayerCurrentHp ? "❤️" : "🤍")
-                        </span>
+                        if (i < State.PlayerCurrentHp)
+                        {
+                            <span class="heart full">❤️</span>
+                        }
+                        else
+                        {
+                            <span class="heart empty">🖤</span>
+                        }
                     }
                 </div>
             </div>
 
-            <!-- Player Visual (4 Phases & Combat Poses) -->
+            <!-- Hero Visual (4 Phases & Combat Poses) -->
             <div class="character-sprite-box">
-                <div class="sprite-phase-indicator">Fáza @State.PlayerHpPhase / 4</div>
                 <img src="@GetCharacterImage(Hero.AssetFolder, State.PlayerHpPhase, State.PlayerPose)" 
                      alt="@Hero.Name" 
-                     class="character-image" 
-                     onerror="this.src='data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\' width=\'180\' height=\'240\'><rect width=\'100%\' height=\'100%\' fill=\'%234a90e2\'/><text x=\'50%\' y=\'50%\' fill=\'white\' font-size=\'20\' text-anchor=\'middle\'>🧙‍♂️ @Hero.Name (Fáza @State.PlayerHpPhase)</text></svg>'"/>
+                     class="character-image hero-img" />
             </div>
         </div>
 
-        <!-- VS Divider / Dynamic Timer -->
-        <div class="arena-center">
+        <!-- Center Round Timer Orb -->
+        <div class="arena-center-timer">
             <div class="timer-orb @GetTimerColorClass()">
                 <div class="timer-seconds">@RemainingTimeSeconds.ToString("F1")s</div>
                 <div class="timer-label">@(State.IsDefensePhase ? "OBRANA!" : "ÚTOK")</div>
@@ -77,8 +77,7 @@
                 <div class="sprite-phase-indicator">Fáza @State.EnemyHpPhase / 4</div>
                 <img src="@GetCharacterImage(State.Enemy.AssetFolder, State.EnemyHpPhase, State.EnemyPose)" 
                      alt="@State.Enemy.Name" 
-                     class="character-image enemy-img"
-                     onerror="this.src='data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\' width=\'180\' height=\'240\'><rect width=\'100%\' height=\'100%\' fill=\'%23e74c3c\'/><text x=\'50%\' y=\'50%\' fill=\'white\' font-size=\'20\' text-anchor=\'middle\'>👾 @State.Enemy.Name (Fáza @State.EnemyHpPhase)</text></svg>'"/>
+                     class="character-image enemy-img" />
             </div>
         </div>
     </div>
@@ -105,39 +104,116 @@
                 }
             </div>
         }
-        else
-        {
-            <!-- Victory / Defeat Modal -->
-            <div class="battle-end-card @(State.IsVictory ? "victory-card" : "defeat-card")">
-                <h2>@(State.IsVictory ? "🏆 VÍŤAZSTVO!" : "💀 PORÁŽKA!")</h2>
-                <p>@State.LastFeedbackMessage</p>
-                <div class="end-actions">
-                    @if (State.IsVictory)
-                    {
-                        <button class="action-btn next-level-btn" @onclick="OnVictoryContinue">Pokračovať v ceste ➡️</button>
-                    }
-                    else
-                    {
-                        <button class="action-btn retry-btn" @onclick="RetryBattle">Skúsiť znova 🔄</button>
-                    }
-                </div>
-            </div>
-        }
     </div>
+
+    <!-- FULLSCREEN VICTORY / DEFEAT CELEBRATION OVERLAY -->
+    @if (State.IsBattleOver)
+    {
+        <div class="battle-end-overlay anim-fade-in">
+            <div class="celebration-modal @(State.IsVictory ? "victory-theme" : "defeat-theme") anim-victory-modal-pop">
+                @if (State.IsVictory)
+                {
+                    <div class="celebration-particles">
+                        <span class="particle star-p1">✨</span>
+                        <span class="particle star-p2">⭐</span>
+                        <span class="particle star-p3">🌟</span>
+                        <span class="particle star-p4">✨</span>
+                    </div>
+
+                    <div class="celebration-header">
+                        <span class="celebration-crown">👑</span>
+                        <h1 class="celebration-title">LEVEL PREKONANÝ!</h1>
+                        <p class="celebration-subtitle">Úspešne si vyriešil všetky úlohy a zvíťazil!</p>
+                    </div>
+
+                    <div class="celebration-body">
+                        <div class="celebration-hero-stage">
+                            <img src="@GetCharacterImage(Hero.AssetFolder, 1, CombatPose.Attack)" 
+                                 alt="@Hero.Name" 
+                                 class="celebration-hero-img anim-hero-victory" />
+                            <span class="victory-hero-name">@Hero.Name</span>
+                        </div>
+
+                        <div class="celebration-rewards-card">
+                            <div class="reward-row">
+                                <span class="reward-icon">⭐</span>
+                                <div class="reward-info">
+                                    <strong>@(CurrentLevel.IsBoss ? "+3 HVIEZDY" : "+1 HVIEZDA")</strong>
+                                    <span>Odmena za víťazstvo</span>
+                                </div>
+                            </div>
+                            <div class="reward-row">
+                                <span class="reward-icon">💰</span>
+                                <div class="reward-info">
+                                    <strong>@(CurrentLevel.IsBoss ? "+50 ZLATA" : "+20 ZLATA")</strong>
+                                    <span>Kráľovská odmena</span>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+
+                    <div class="celebration-actions">
+                        @if (NextLevel != null)
+                        {
+                            <button class="btn-grand-celebration btn-next-quest" @onclick="HandleNextLevelClick">
+                                🚀 POSTÚPIŤ DO LEVELU: @NextLevel.Name ➜
+                            </button>
+                        }
+                        <div class="secondary-actions-row">
+                            <button class="btn-secondary-celebration" @onclick="OnVictoryContinue">
+                                🗺️ Mapa sveta
+                            </button>
+                            <button class="btn-secondary-celebration" @onclick="RetryBattle">
+                                🔁 Hrať znova
+                            </button>
+                        </div>
+                    </div>
+                }
+                else
+                {
+                    <div class="defeat-header">
+                        <span class="defeat-icon">💀</span>
+                        <h1 class="defeat-title">NEVZDÁVAJ SA!</h1>
+                        <p class="defeat-subtitle">@State.LastFeedbackMessage</p>
+                    </div>
+
+                    <div class="defeat-body">
+                        <p class="defeat-encouragement">
+                            „Každý udatný počtár sa učí na vlastných chybách. Skús to znova a ukáž svoju matematickú silu!“
+                        </p>
+                    </div>
+
+                    <div class="celebration-actions">
+                        <button class="btn-grand-celebration btn-retry-quest" @onclick="RetryBattle">
+                            🔄 SKÚSIŤ ZNOVA ⚔️
+                        </button>
+                        <button class="btn-secondary-celebration" @onclick="GoBackToMap">
+                            🗺️ Návrat na mapu
+                        </button>
+                    </div>
+                }
+            </div>
+        </div>
+    }
 </div>
 
 @code {
     [Parameter] public Hero Hero { get; set; } = new();
     [Parameter] public Level CurrentLevel { get; set; } = new();
+    [Parameter] public int PlayerGrade { get; set; } = 1;
+    [Parameter] public string BackgroundImage { get; set; } = "assets/images/backgrounds/world1_meadow.jpg";
     [Parameter] public GameConfig Config { get; set; } = new();
     [Parameter] public EventCallback OnReturnToMap { get; set; }
     [Parameter] public EventCallback<Level> OnLevelCompleted { get; set; }
+    [Parameter] public EventCallback<Level> OnNextLevelRequested { get; set; }
 
     private BattleState State => BattleEngine.State;
     private string CurrentInput { get; set; } = string.Empty;
     private System.Threading.Timer? _timer;
     private double RemainingTimeSeconds { get; set; } = 6.0;
 
+    private Level? NextLevel => DataLoader.GetNextLevel(PlayerGrade, CurrentLevel.Id);
+
     protected override void OnInitialized()
     {
         StartBattle();
@@ -229,6 +305,18 @@
         await OnLevelCompleted.InvokeAsync(CurrentLevel);
     }
 
+    private async Task HandleNextLevelClick()
+    {
+        if (NextLevel != null)
+        {
+            await OnNextLevelRequested.InvokeAsync(NextLevel);
+        }
+        else
+        {
+            await OnVictoryContinue();
+        }
+    }
+
     private async Task GoBackToMap()
     {
         _timer?.Dispose();
@@ -297,23 +385,28 @@
             if (e.Key == "Enter")
             {
                 if (State.IsVictory)
-                    await OnVictoryContinue();
+                {
+                    if (NextLevel != null)
+                        await HandleNextLevelClick();
+                    else
+                        await OnVictoryContinue();
+                }
                 else
+                {
                     await RetryBattle();
+                }
             }
             return;
         }
 
         if (State.CurrentProblem.InputType == "MultipleChoice" || State.IsDefensePhase)
         {
-            // Handle number keys 1, 2, 3 to pick choices
             if (int.TryParse(e.Key, out int choiceIndex) && choiceIndex >= 1 && choiceIndex <= State.CurrentProblem.Choices.Count)
             {
                 await HandleChoiceSelected(State.CurrentProblem.Choices[choiceIndex - 1]);
                 return;
             }
 
-            // Handle A/N shortcuts for ÁNO / NIE
             if (e.Key.Equals("a", StringComparison.OrdinalIgnoreCase) || e.Key.Equals("y", StringComparison.OrdinalIgnoreCase))
             {
                 var match = State.CurrentProblem.Choices.FirstOrDefault(c => c.StartsWith("Á", StringComparison.OrdinalIgnoreCase) || c.StartsWith("A", StringComparison.OrdinalIgnoreCase));
@@ -329,7 +422,6 @@
         }
         else
         {
-            // Direct numeric input (0-9, Backspace, Enter)
             if (e.Key.Length == 1 && char.IsDigit(e.Key[0]))
             {
                 if (CurrentInput.Length < 6)
@@ -356,4 +448,3 @@
         }
     }
 }
-
diff --git a/src/CiselnaVyprava/Components/CharacterSelect.razor b/src/CiselnaVyprava/Components/CharacterSelect.razor
index eac5593..5c2013c 100644
--- a/src/CiselnaVyprava/Components/CharacterSelect.razor
+++ b/src/CiselnaVyprava/Components/CharacterSelect.razor
@@ -1,106 +1,379 @@
 @inject IGameDataLoader DataLoader
 @inject ILocalStorageService Storage
 
-<div class="character-select-screen">
-    <div class="parchment-container select-card-compact">
-        <div class="select-header">
-            <h1 class="game-main-title">🏰 ČÍSELNÁ VÝPRAVA</h1>
-            <p class="subtitle">Vytvor si svojho hrdinu a vyber ročník</p>
-        </div>
-
-        <div class="select-content-grid">
-            <!-- LEFT: ROČNÍK & MENO -->
-            <div class="select-col-left">
-                <div class="selection-section">
-                    <h2 class="step-title">1. Tvoj ročník</h2>
-                    <div class="grade-toggle-group">
-                        <button class="grade-btn @(SelectedGrade == 1 ? "active" : "")" @onclick="() => SetGrade(1)">
-                            <span class="grade-badge">🎒 1. ROČNÍK</span>
-                            <span class="grade-desc">Do 10 / 20</span>
-                        </button>
-                        <button class="grade-btn @(SelectedGrade == 2 ? "active" : "")" @onclick="() => SetGrade(2)">
-                            <span class="grade-badge">🎒 2. ROČNÍK</span>
-                            <span class="grade-desc">Do 20 / 100</span>
-                        </button>
-                        <button class="grade-btn @(SelectedGrade == 3 ? "active" : "")" @onclick="() => SetGrade(3)">
-                            <span class="grade-badge">🎒 3. ROČNÍK</span>
-                            <span class="grade-desc">Násobilka & delenie</span>
-                        </button>
+<div class="wizard-screen">
+    @switch (CurrentStep)
+    {
+        case WizardStep.SelectGrade:
+        {
+            <div class="parchment-container wizard-container">
+                <div class="wizard-top-bar">
+                    <button class="btn-wizard-back" @onclick="HandleBackToMenu">
+                        ⬅ Späť do menu
+                    </button>
+                    <div class="wizard-stepper">
+                        <span class="step-badge active">1. Ročník 🎒</span>
+                        <span class="step-divider">➔</span>
+                        <span class="step-badge">2. Hrdina 🛡️</span>
+                        <span class="step-divider">➔</span>
+                        <span class="step-badge">3. Meno 👑</span>
                     </div>
                 </div>
 
-                <div class="selection-section">
-                    <h2 class="step-title">3. Meno hrdinu</h2>
-                    <div class="name-field-row">
-                        <input type="text" class="hero-name-input" @bind="HeroName" placeholder="Tvoje meno..." maxlength="20" />
-                        <button class="btn-start-quest" @onclick="StartQuest">
-                            Vstúpiť do hry 🚀
-                        </button>
+                <div class="wizard-header">
+                    <h1 class="wizard-title">🎒 VYBER SI ROČNÍK</h1>
+                    <p class="wizard-subtitle">Zvoľ si úroveň matematických výziev pre svoje dobrodružstvo</p>
+                </div>
+
+                <div class="grades-grid">
+                    <!-- GRADE 1 -->
+                    <div class="grade-card grade-1-card @(SelectedGrade == 1 ? "selected" : "")" @onclick="() => SelectGradeAndProceed(1)">
+                        <div class="grade-banner-stage" style="background: url('assets/images/backgrounds/world1_meadow.jpg') center/cover no-repeat;">
+                            <div class="grade-banner-overlay">
+                                <span class="grade-card-icon">⭐</span>
+                                <div class="grade-card-badge grade-1-badge">1. ROČNÍK</div>
+                            </div>
+                        </div>
+                        <div class="grade-card-content">
+                            <h3 class="grade-card-title">Prváčik</h3>
+                            <p class="grade-card-desc">Základné sčítanie a odčítanie v rozprávkovej lúke.</p>
+                            <ul class="grade-topics-list">
+                                <li>➕ Sčítanie a odčítanie do 10 a 20</li>
+                                <li>⚖️ Porovnávanie čísel (&lt;, &gt;, =)</li>
+                                <li>🔟 Počítanie po desiatkach do 100</li>
+                            </ul>
+                            <button class="btn-grade-select btn-grade-1" @onclick:stopPropagation="true" @onclick="() => SelectGradeAndProceed(1)">
+                                Zvoliť 1. ročník ➜
+                            </button>
+                        </div>
+                    </div>
+
+                    <!-- GRADE 2 -->
+                    <div class="grade-card grade-2-card @(SelectedGrade == 2 ? "selected" : "")" @onclick="() => SelectGradeAndProceed(2)">
+                        <div class="grade-banner-stage" style="background: url('assets/images/backgrounds/world2_forest.jpg') center/cover no-repeat;">
+                            <div class="grade-banner-overlay">
+                                <span class="grade-card-icon">🌟</span>
+                                <div class="grade-card-badge grade-2-badge">2. ROČNÍK</div>
+                            </div>
+                        </div>
+                        <div class="grade-card-content">
+                            <h3 class="grade-card-title">Druhák</h3>
+                            <p class="grade-card-desc">Počítanie do 100 s prechodom a úvod do násobilky.</p>
+                            <ul class="grade-topics-list">
+                                <li>➕ Sčítanie a odčítanie do 100 s prechodom</li>
+                                <li>⚖️ Porovnávanie hodnôt do 100</li>
+                                <li>✖️ Malá násobilka (2, 3, 5, 10)</li>
+                            </ul>
+                            <button class="btn-grade-select btn-grade-2" @onclick:stopPropagation="true" @onclick="() => SelectGradeAndProceed(2)">
+                                Zvoliť 2. ročník ➜
+                            </button>
+                        </div>
+                    </div>
+
+                    <!-- GRADE 3 -->
+                    <div class="grade-card grade-3-card @(SelectedGrade == 3 ? "selected" : "")" @onclick="() => SelectGradeAndProceed(3)">
+                        <div class="grade-banner-stage" style="background: url('assets/images/backgrounds/world3_river.jpg') center/cover no-repeat;">
+                            <div class="grade-banner-overlay">
+                                <span class="grade-card-icon">👑</span>
+                                <div class="grade-card-badge grade-3-badge">3. ROČNÍK</div>
+                            </div>
+                        </div>
+                        <div class="grade-card-content">
+                            <h3 class="grade-card-title">Tretiak</h3>
+                            <p class="grade-card-desc">Kompletná násobilka, delenie a počítanie do tisícky!</p>
+                            <ul class="grade-topics-list">
+                                <li>✖️ Celá násobilka a delenie (2 – 10)</li>
+                                <li>🧮 Počítanie do 1000 (stovky a desiatky)</li>
+                                <li>🏆 Finálne bitky o kráľovskú citadelu</li>
+                            </ul>
+                            <button class="btn-grade-select btn-grade-3" @onclick:stopPropagation="true" @onclick="() => SelectGradeAndProceed(3)">
+                                Zvoliť 3. ročník ➜
+                            </button>
+                        </div>
                     </div>
                 </div>
             </div>
+            break;
+        }
 
-            <!-- RIGHT: VÝBER HRDINU -->
-            <div class="select-col-right">
-                <div class="selection-section">
-                    <h2 class="step-title">2. Vyber si hrdinu</h2>
-                    <div class="heroes-grid">
-                        @foreach (var hero in DataLoader.Heroes)
+        case WizardStep.SelectHero:
+        {
+            <div class="parchment-container wizard-container">
+                <div class="wizard-top-bar">
+                    <button class="btn-wizard-back" @onclick="() => CurrentStep = WizardStep.SelectGrade">
+                        ⬅ Späť na ročník
+                    </button>
+                    <div class="wizard-stepper">
+                        <span class="step-badge completed" @onclick="() => CurrentStep = WizardStep.SelectGrade">✓ @SelectedGrade. Ročník</span>
+                        <span class="step-divider">➔</span>
+                        <span class="step-badge active">2. Hrdina 🛡️</span>
+                        <span class="step-divider">➔</span>
+                        <span class="step-badge">3. Meno 👑</span>
+                    </div>
+                </div>
+
+                <div class="wizard-header">
+                    <h1 class="wizard-title">🛡️ ZVOĽ SI SVOJHO HRDINU</h1>
+                    <p class="wizard-subtitle">Vyber si postavu, s ktorou zachrániš Číselné Kráľovstvo</p>
+                </div>
+
+                <div class="hero-showcase-grid">
+                    @foreach (var hero in DataLoader.Heroes)
+                    {
+                        var isSelected = SelectedHeroId == hero.Id;
+                        var heroImg = $"{hero.AssetFolder}_idle_p1.png";
+                        var themeClass = hero.Id switch
                         {
-                            <div class="hero-card @(SelectedHeroId == hero.Id ? "selected-card" : "")" 
-                                 @onclick="() => SelectHero(hero.Id)">
-                                <div class="hero-avatar">
-                                    @(hero.Id == "knight" ? "⚔️" : hero.Id == "mage" ? "🧙‍♂️" : "🏹")
+                            "knight" => "hero-theme-knight",
+                            "mage" => "hero-theme-mage",
+                            "archer" => "hero-theme-archer",
+                            _ => "hero-theme-knight"
+                        };
+                        var icon = hero.Id switch
+                        {
+                            "knight" => "⚔️",
+                            "mage" => "🔮",
+                            "archer" => "🏹",
+                            _ => "🛡️"
+                        };
+
+                        <div class="hero-showcase-card @themeClass @(isSelected ? "selected" : "")" 
+                             @onclick="() => SelectHeroAndProceed(hero.Id)">
+                            <div class="hero-card-banner">
+                                <span class="hero-crest-icon">@icon</span>
+                                <span class="hero-class-label">@hero.Title</span>
+                            </div>
+
+                            <div class="hero-portrait-stage">
+                                <img src="@heroImg" alt="@hero.Name" class="hero-portrait-img anim-hero-idle" />
+                            </div>
+
+                            <div class="hero-info-box">
+                                <h3 class="hero-title-name">@hero.Name</h3>
+                                <p class="hero-lore-desc">@hero.Description</p>
+                                
+                                <div class="hero-skill-pill">
+                                    ✨ <strong>@hero.SpecialAttackName</strong>
                                 </div>
-                                <h3 class="hero-name">@hero.Name</h3>
-                                <span class="hero-title">@hero.Title</span>
-                                <div class="hero-skill">
-                                    ✨ @hero.SpecialAttackName
+
+                                <div class="hero-stats-row">
+                                    <span class="stat-tag">❤️ @hero.BaseHp HP</span>
+                                    <span class="stat-tag">⚡ @hero.AttackPower ÚTOK</span>
+                                    <span class="stat-tag">🛡️ ŠTÍT</span>
                                 </div>
                             </div>
-                        }
+
+                            <button class="btn-hero-select" @onclick:stopPropagation="true" @onclick="() => SelectHeroAndProceed(hero.Id)">
+                                Zvoliť hrdinu ➜
+                            </button>
+                        </div>
+                    }
+                </div>
+            </div>
+            break;
+        }
+
+        case WizardStep.NameAndStart:
+        {
+            <div class="parchment-container wizard-container wizard-name-container">
+                <div class="wizard-top-bar">
+                    <button class="btn-wizard-back" @onclick="() => CurrentStep = WizardStep.SelectHero">
+                        ⬅ Späť na výber hrdinu
+                    </button>
+                    <div class="wizard-stepper">
+                        <span class="step-badge completed" @onclick="() => CurrentStep = WizardStep.SelectGrade">✓ @SelectedGrade. Ročník</span>
+                        <span class="step-divider">➔</span>
+                        <span class="step-badge completed" @onclick="() => CurrentStep = WizardStep.SelectHero">✓ @CurrentSelectedHero.Name</span>
+                        <span class="step-divider">➔</span>
+                        <span class="step-badge active">3. Meno & Štart 👑</span>
+                    </div>
+                </div>
+
+                <div class="wizard-header">
+                    <h1 class="wizard-title">👑 POJMENUJ SVOJHO HRDINU</h1>
+                    <p class="wizard-subtitle">Posledný krok pred otvorením brány kráľovstva!</p>
+                </div>
+
+                <div class="naming-content-stage">
+                    <!-- LEFT: HERO AVATAR & BADGES -->
+                    <div class="naming-hero-preview">
+                        <div class="hero-stage-pedestal">
+                            <img src="@CurrentSelectedHeroImg" alt="@CurrentSelectedHero.Name" class="naming-hero-img anim-hero-idle" />
+                        </div>
+                        <div class="naming-badges-row">
+                            <span class="grade-pill-badge">🎒 @SelectedGrade. Ročník</span>
+                            <span class="hero-pill-badge">🛡️ @CurrentSelectedHero.Title</span>
+                        </div>
+                        <div class="naming-stat-summary">
+                            <span>❤️ 5 Životov</span>
+                            <span>⚡ 10 Útok</span>
+                            <span>⏱️ &lt;3s Kritický zásah (150%)</span>
+                        </div>
+                    </div>
+
+                    <!-- RIGHT: NAME INPUT & ACTION BUTTON -->
+                    <div class="naming-form-box">
+                        <div class="form-group">
+                            <label class="form-label" for="heroNameInput">Ako sa volá tvoj hrdina?</label>
+                            <div class="name-input-with-dice">
+                                <input id="heroNameInput"
+                                       type="text" 
+                                       class="hero-name-big-input" 
+                                       @bind="HeroName" 
+                                       placeholder="Zadaj meno hrdinu..." 
+                                       maxlength="20" />
+                                <button type="button" 
+                                        class="btn-dice-randomizer @(IsRollingDice ? "rolling" : "")" 
+                                        @onclick="RollRandomName" 
+                                        title="Vyžrebovať náhodné meno!">
+                                    <span class="dice-icon">🎲</span>
+                                    <span class="dice-label">Náhodné meno</span>
+                                </button>
+                            </div>
+                        </div>
+
+                        <div class="quick-names-section">
+                            <span class="quick-names-title">Alebo si vyber obľúbené meno:</span>
+                            <div class="quick-names-grid">
+                                @foreach (var suggestion in QuickNameSuggestions)
+                                {
+                                    <button type="button" 
+                                            class="name-chip-btn @(HeroName == suggestion ? "active-chip" : "")" 
+                                            @onclick="() => SetHeroName(suggestion)">
+                                        @suggestion
+                                    </button>
+                                }
+                            </div>
+                        </div>
+
+                        <div class="naming-action-footer">
+                            <button class="btn-grand-start" @onclick="StartQuest">
+                                ⚔️ VSTÚPIŤ DO HRY A ZAČAŤ VÝPRAVU 🚀
+                            </button>
+                            <p class="autosave-notice">💾 Tvoj postup a hviezdičky sa automaticky ukladajú na tomto zariadení.</p>
+                        </div>
                     </div>
                 </div>
             </div>
-        </div>
-    </div>
+            break;
+        }
+    }
 </div>
 
-
 @code {
     [Parameter] public EventCallback<PlayerProfile> OnProfileReady { get; set; }
+    [Parameter] public EventCallback OnCancel { get; set; }
 
+    private enum WizardStep
+    {
+        SelectGrade,
+        SelectHero,
+        NameAndStart
+    }
+
+    private WizardStep CurrentStep { get; set; } = WizardStep.SelectGrade;
     private int SelectedGrade { get; set; } = 2;
     private string SelectedHeroId { get; set; } = "knight";
-    private string HeroName { get; set; } = "Mladý Hrdina";
+    private string HeroName { get; set; } = "Udatný Rytier";
+    private bool IsRollingDice { get; set; } = false;
+
+    private Hero CurrentSelectedHero => DataLoader.GetHero(SelectedHeroId) ?? DataLoader.Heroes.FirstOrDefault() ?? new Hero();
+    private string CurrentSelectedHeroImg => $"{CurrentSelectedHero.AssetFolder}_idle_p1.png";
+
+    private readonly Random _random = new();
+
+    private readonly List<string> QuickNameSuggestions = new()
+    {
+        "Arthur", "Eliška", "Maxim", "Sofia", "Oliver", 
+        "Viktória", "Lucas", "Nela", "Jakub", "Mia"
+    };
+
+    private readonly List<string> AllHeroNamesPool = new()
+    {
+        // Chlapčenské mená
+        "Arthur", "Maxim", "Oliver", "Lucas", "Leo", "Alex", "Matias", "Michal", 
+        "Adam", "Jakub", "Filip", "Damián", "Teodor", "Bruno", "Hugo", "Šimon", 
+        "Tobiáš", "Viktor", "Benjamín", "Richard", "Tomáš", "Patrik", "Matej",
+        // Dievčenské mená
+        "Eliška", "Sofia", "Viktória", "Nela", "Mia", "Nina", "Ema", "Tamara", 
+        "Laura", "Dorotka", "Linda", "Sára", "Stella", "Lea", "Hana", "Kristína", 
+        "Amélia", "Zoja", "Diana", "Barborka", "Zuzka", "Veronika", "Natália",
+        // Hrdinské rozprávkové tituly
+        "Udatný Arthur", "Bystrá Sofia", "Rýchly Alex", "Odvážna Eliška", "Múdry Oliver",
+        "Čarovná Mia", "Hrdina Maxim", "Jasná Stella", "Šampión Leo", "Zlatá Viktória",
+        "Rytier Pravítko", "Mág Číselník", "Lučostrelec Stovka", "Kráľovský Strážca"
+    };
 
     protected override void OnInitialized()
     {
         if (DataLoader.Heroes.Any())
         {
             SelectedHeroId = DataLoader.Heroes.First().Id;
+            UpdateDefaultName();
         }
     }
 
-    private void SetGrade(int grade)
+    private void SelectGradeAndProceed(int grade)
     {
         SelectedGrade = grade;
+        CurrentStep = WizardStep.SelectHero;
     }
 
-    private void SelectHero(string heroId)
+    private void SelectHeroAndProceed(string heroId)
     {
         SelectedHeroId = heroId;
+        UpdateDefaultName();
+        CurrentStep = WizardStep.NameAndStart;
+    }
+
+    private void UpdateDefaultName()
+    {
+        HeroName = SelectedHeroId switch
+        {
+            "knight" => "Udatný Rytier",
+            "mage" => "Mág Číselník",
+            "archer" => "Bystrý Lučostrelec",
+            _ => "Mladý Hrdina"
+        };
+    }
+
+    private async Task RollRandomName()
+    {
+        IsRollingDice = true;
+        StateHasChanged();
+
+        var available = AllHeroNamesPool.Where(n => n != HeroName).ToList();
+        if (!available.Any()) available = AllHeroNamesPool;
+
+        HeroName = available[_random.Next(available.Count)];
+
+        await Task.Delay(300);
+        IsRollingDice = false;
+        StateHasChanged();
+    }
+
+    private void SetHeroName(string name)
+    {
+        HeroName = name;
+    }
+
+    private async Task HandleBackToMenu()
+    {
+        await OnCancel.InvokeAsync();
     }
 
     private async Task StartQuest()
     {
+        var finalName = string.IsNullOrWhiteSpace(HeroName) ? "Mladý Hrdina" : HeroName.Trim();
+        
         var profile = new PlayerProfile
         {
-            Name = string.IsNullOrWhiteSpace(HeroName) ? "Mladý Hrdina" : HeroName,
+            Name = finalName,
             SelectedGrade = SelectedGrade,
             SelectedHeroId = SelectedHeroId,
             CurrentWorldId = 1,
-            UnlockedLevels = new HashSet<string> { $"{SelectedGrade}-1-1" }
+            UnlockedLevels = new HashSet<string> { $"{SelectedGrade}-1-1" },
+            CompletedLevels = new HashSet<string>()
         };
 
         await Storage.SaveProfileAsync(profile);
diff --git a/src/CiselnaVyprava/Components/WorldMap.razor b/src/CiselnaVyprava/Components/WorldMap.razor
index 1e7d6e3..de25d70 100644
--- a/src/CiselnaVyprava/Components/WorldMap.razor
+++ b/src/CiselnaVyprava/Components/WorldMap.razor
@@ -1,61 +1,180 @@
 @inject IGameDataLoader DataLoader
 
 <div class="world-map-screen">
-    <!-- Top Player Status Bar -->
+    <!-- TOP STATUS BAR -->
     <div class="map-top-bar">
         <div class="player-pill">
-            <span class="avatar-icon">@(Profile.SelectedHeroId == "knight" ? "⚔️" : Profile.SelectedHeroId == "mage" ? "🧙‍♂️" : "🏹")</span>
-            <span class="player-name">@Profile.Name</span>
-            <span class="grade-tag">@(Profile.SelectedGrade). Ročník</span>
+            <img src="@HeroAvatarUrl" alt="Hrdina" class="mini-hero-avatar" />
+            <div class="player-info-text">
+                <span class="player-name">@Profile.Name</span>
+                <span class="grade-tag">🎒 @(Profile.SelectedGrade). Ročník</span>
+            </div>
         </div>
-        <div class="stats-pill">
-            <span>⭐ Hviezdy: <strong>@Profile.TotalStars</strong></span>
+
+        <div class="stats-pill-group">
+            <div class="stat-badge stars-badge">
+                <span>⭐ <strong>@Profile.TotalStars</strong> Hviezd</span>
+            </div>
+            <div class="stat-badge gold-badge">
+                <span>💰 <strong>@Profile.Gold</strong> Zlata</span>
+            </div>
+        </div>
+
+        <div class="map-top-actions">
+            <button class="btn-top-action" @onclick="OnChangeHero" title="Zmeniť ročník alebo hrdinu">
+                🎒 Zmeniť hrdinu
+            </button>
         </div>
-        <button class="btn-change-hero" @onclick="OnChangeHero">Zmeniť hrdinu 🔄</button>
     </div>
 
-    <!-- Worlds Container -->
-    <div class="worlds-carousel">
-        @foreach (var world in Worlds)
-        {
-            <div class="world-card">
-                <div class="world-header">
-                    <h2>@world.Name</h2>
-                    <p>@world.Description</p>
-                </div>
-                <div class="levels-path">
-                    @foreach (var level in world.Levels)
-                    {
-                        bool isUnlocked = Profile.UnlockedLevels.Contains(level.Id);
-                        bool isCompleted = Profile.CompletedLevels.Contains(level.Id);
+    <!-- MAIN WORLD MAP CONTENT AREA -->
+    <div class="world-map-content">
+        <!-- WORLD SELECTION TABS -->
+        <div class="world-tabs-nav">
+            @for (int i = 0; i < Worlds.Count; i++)
+            {
+                var w = Worlds[i];
+                var worldIndex = i + 1;
+                var isSelected = SelectedWorldIndex == worldIndex;
+                var isWorldUnlocked = w.Levels.Any(l => Profile.UnlockedLevels.Contains(l.Id));
+                var completedInWorld = w.Levels.Count(l => Profile.CompletedLevels.Contains(l.Id));
+                var totalInWorld = w.Levels.Count;
+                var isWorldCompleted = totalInWorld > 0 && completedInWorld == totalInWorld;
 
-                        <button class="level-node @(level.IsBoss ? "boss-node" : "") @(isUnlocked ? "unlocked" : "locked") @(isCompleted ? "completed" : "")"
-                                disabled="@(!isUnlocked)"
-                                @onclick="() => SelectLevel(level)">
-                            <div class="node-icon">
+                <button class="world-tab-btn @(isSelected ? "active" : "") @(isWorldUnlocked ? "unlocked" : "locked") @(isWorldCompleted ? "world-completed" : "")"
+                        disabled="@(!isWorldUnlocked)"
+                        @onclick="() => SelectWorld(worldIndex)">
+                    <span class="world-tab-icon">
+                        @if (isWorldCompleted)
+                        {
+                            <span>🌟</span>
+                        }
+                        else if (!isWorldUnlocked)
+                        {
+                            <span>🔒</span>
+                        }
+                        else
+                        {
+                            <span>@(worldIndex == 1 ? "🌸" : worldIndex == 2 ? "🌲" : worldIndex == 3 ? "🌊" : worldIndex == 4 ? "⛰️" : "🏰")</span>
+                        }
+                    </span>
+                    <span class="world-tab-label">Svet @worldIndex</span>
+                    <span class="world-tab-progress">@completedInWorld/@totalInWorld</span>
+                </button>
+            }
+        </div>
+
+        <!-- CURRENT SELECTED WORLD SHOWCASE -->
+        @if (ActiveWorld != null)
+        {
+            var completedCount = ActiveWorld.Levels.Count(l => Profile.CompletedLevels.Contains(l.Id));
+            var totalCount = ActiveWorld.Levels.Count;
+            var progressPercent = totalCount > 0 ? (int)((double)completedCount / totalCount * 100) : 0;
+
+            <div class="active-world-card parchment-container">
+                <!-- WORLD BANNER HEADER -->
+                <div class="world-header-row">
+                    <div class="world-title-col">
+                        <h2 class="active-world-title">@ActiveWorld.Name</h2>
+                        <p class="active-world-desc">@ActiveWorld.Description</p>
+                    </div>
+
+                    <div class="world-progress-col">
+                        <div class="progress-label-row">
+                            <span>Postup vo svete:</span>
+                            <strong>@completedCount z @totalCount splnených</strong>
+                        </div>
+                        <div class="world-progress-bar">
+                            <div class="world-progress-fill" style="width: @(progressPercent)%"></div>
+                        </div>
+                    </div>
+                </div>
+
+                <!-- LEVELS RICH CARDS GRID -->
+                <div class="levels-rich-grid">
+                    @foreach (var level in ActiveWorld.Levels)
+                    {
+                        var isUnlocked = Profile.UnlockedLevels.Contains(level.Id);
+                        var isCompleted = Profile.CompletedLevels.Contains(level.Id);
+                        var enemyImg = $"{level.Enemy.AssetFolder}_idle_p1.png";
+                        var mathDesc = GetMathDescription(level.MathConfig);
+
+                        <div class="level-rich-card @(level.IsBoss ? "boss-card" : "") @(isCompleted ? "status-completed" : isUnlocked ? "status-current" : "status-locked")">
+                            
+                            <!-- CARD STATUS BADGE -->
+                            <div class="card-status-banner">
                                 @if (isCompleted)
                                 {
-                                    <span>⭐</span>
+                                    <span class="badge-completed">🏆 PREKONANÝ</span>
+                                    <span class="stars-awarded">@(level.IsBoss ? "⭐⭐⭐" : "⭐")</span>
                                 }
                                 else if (level.IsBoss)
                                 {
-                                    <span>👑</span>
+                                    <span class="badge-boss">👑 VEĽKÝ BOSS</span>
                                 }
                                 else if (isUnlocked)
                                 {
-                                    <span>⚔️</span>
+                                    <span class="badge-active">⚔️ NOVÁ VÝZVA</span>
                                 }
                                 else
                                 {
-                                    <span>🔒</span>
+                                    <span class="badge-locked">🔒 ZAMKNUTÉ</span>
                                 }
                             </div>
-                            <span class="level-title">@level.Name</span>
-                            @if (level.IsBoss)
-                            {
-                                <span class="boss-tag">BOSS</span>
-                            }
-                        </button>
+
+                            <!-- ENEMY AVATAR STAGE -->
+                            <div class="level-enemy-stage">
+                                <div class="enemy-avatar-wrapper @(isCompleted ? "defeated-glow" : isUnlocked ? "active-glow" : "locked-silhouette")">
+                                    <img src="@enemyImg" alt="@level.Enemy.Name" class="level-enemy-img @(isUnlocked && !isCompleted ? "anim-hero-idle" : "")" />
+                                    @if (!isUnlocked)
+                                    {
+                                        <div class="lock-overlay">🔒</div>
+                                    }
+                                    @if (isCompleted)
+                                    {
+                                        <div class="check-overlay">✓</div>
+                                    }
+                                </div>
+                            </div>
+
+                            <!-- LEVEL DETAILS -->
+                            <div class="level-info-body">
+                                <div class="level-number-tag">Level @level.LevelNumber</div>
+                                <h3 class="level-name-title">@level.Name</h3>
+                                <div class="level-enemy-name">Protivník: <strong>@level.Enemy.Name</strong></div>
+                                
+                                <div class="level-math-pill">
+                                    @mathDesc
+                                </div>
+
+                                <div class="level-stats-row">
+                                    <span class="stat-bubble">❤️ @level.Enemy.MaxHp HP</span>
+                                    <span class="stat-bubble">🎯 @level.RequiredCorrectAnswers správne</span>
+                                </div>
+                            </div>
+
+                            <!-- ACTION BUTTON -->
+                            <div class="level-card-footer">
+                                @if (isCompleted)
+                                {
+                                    <button class="btn-level-action btn-replay" @onclick="() => SelectLevel(level)">
+                                        🔁 Hrať znova (Tréning)
+                                    </button>
+                                }
+                                else if (isUnlocked)
+                                {
+                                    <button class="btn-level-action btn-battle @(level.IsBoss ? "btn-boss-battle" : "")" @onclick="() => SelectLevel(level)">
+                                        ⚔️ VYZVAŤ NA SÚBOJ! ➜
+                                    </button>
+                                }
+                                else
+                                {
+                                    <button class="btn-level-action btn-locked" disabled="true">
+                                        🔒 Splň predchádzajúci level
+                                    </button>
+                                }
+                            </div>
+                        </div>
                     }
                 </div>
             </div>
@@ -69,9 +188,81 @@
     [Parameter] public EventCallback OnChangeHero { get; set; }
 
     private List<World> Worlds => DataLoader.GetWorldsForGrade(Profile.SelectedGrade);
+    private int SelectedWorldIndex { get; set; } = 1;
+
+    private World? ActiveWorld => Worlds.FirstOrDefault(w => w.Id == SelectedWorldIndex) 
+                                 ?? Worlds.FirstOrDefault();
+
+    private string HeroAvatarUrl
+    {
+        get
+        {
+            var hero = DataLoader.GetHero(Profile.SelectedHeroId) ?? DataLoader.Heroes.FirstOrDefault();
+            return hero != null ? $"{hero.AssetFolder}_idle_p1.png" : "assets/images/heroes/knight_idle_p1.png";
+        }
+    }
+
+    protected override void OnInitialized()
+    {
+        // Automatically select the world that has the highest unlocked level
+        if (Worlds.Any())
+        {
+            var highestWorldWithUnlocked = Worlds
+                .Where(w => w.Levels.Any(l => Profile.UnlockedLevels.Contains(l.Id)))
+                .OrderByDescending(w => w.Id)
+                .FirstOrDefault();
+
+            if (highestWorldWithUnlocked != null)
+            {
+                SelectedWorldIndex = highestWorldWithUnlocked.Id;
+            }
+            else
+            {
+                SelectedWorldIndex = Worlds.First().Id;
+            }
+        }
+    }
+
+    private void SelectWorld(int worldIndex)
+    {
+        SelectedWorldIndex = worldIndex;
+    }
 
     private async Task SelectLevel(Level level)
     {
         await OnLevelSelected.InvokeAsync(level);
     }
+
+    private string GetMathDescription(MathConfig config)
+    {
+        if (config.Operations.Contains("<") || config.Operations.Contains(">") || config.Operations.Contains("="))
+        {
+            return "⚖️ Porovnávanie čísel (< > =)";
+        }
+        if (config.Operations.Contains("*") && config.Operations.Contains("/"))
+        {
+            return "✖️ ➗ Násobilka a delenie";
+        }
+        if (config.Operations.Contains("*"))
+        {
+            return "✖️ Malá násobilka";
+        }
+        if (config.Operations.Contains("/"))
+        {
+            return "➗ Delenie čísel";
+        }
+        if (config.Operations.Contains("+") && config.Operations.Contains("-"))
+        {
+            return $"➕ ➖ Sčítanie a odčítanie do {config.MaxSum}";
+        }
+        if (config.Operations.Contains("+"))
+        {
+            return $"➕ Sčítanie do {config.MaxSum}";
+        }
+        if (config.Operations.Contains("-"))
+        {
+            return $"➖ Odčítanie do {config.MaxA}";
+        }
+        return "➕ Matematická výzva";
+    }
 }
diff --git a/src/CiselnaVyprava/Pages/Home.razor b/src/CiselnaVyprava/Pages/Home.razor
index 6991471..af98ba8 100644
--- a/src/CiselnaVyprava/Pages/Home.razor
+++ b/src/CiselnaVyprava/Pages/Home.razor
@@ -23,7 +23,8 @@
     }
     else if (CurrentScreen == ScreenType.CharacterSelect)
     {
-        <CharacterSelect OnProfileReady="HandleProfileReady" />
+        <CharacterSelect OnProfileReady="HandleProfileReady" 
+                         OnCancel="() => CurrentScreen = ScreenType.MainMenu" />
     }
     else if (CurrentScreen == ScreenType.WorldMap)
     {
@@ -34,11 +35,42 @@
     else if (CurrentScreen == ScreenType.Battle && SelectedLevel != null)
     {
         var hero = DataLoader.GetHero(Profile.SelectedHeroId) ?? DataLoader.Heroes.First();
+        var worlds = DataLoader.GetWorldsForGrade(Profile.SelectedGrade);
+        var currentWorld = worlds.FirstOrDefault(w => w.Levels.Any(l => l.Id == SelectedLevel.Id));
+        var bg = currentWorld?.Background ?? "assets/images/backgrounds/world1_meadow.jpg";
+
         <BattleArena Hero="hero" 
                      CurrentLevel="SelectedLevel" 
+                     PlayerGrade="Profile.SelectedGrade"
+                     BackgroundImage="@bg"
                      Config="DataLoader.Config"
                      OnReturnToMap="() => CurrentScreen = ScreenType.WorldMap"
-                     OnLevelCompleted="HandleLevelCompleted" />
+                     OnLevelCompleted="HandleLevelCompleted"
+                     OnNextLevelRequested="HandleNextLevelRequested" />
+    }
+
+    <!-- FAIRYTALE LEVEL TRANSITION SCREEN -->
+    @if (IsTransitioning)
+    {
+        var hero = DataLoader.GetHero(Profile.SelectedHeroId) ?? DataLoader.Heroes.FirstOrDefault();
+        var heroAvatar = hero != null ? $"{hero.AssetFolder}_idle_p1.png" : "assets/images/heroes/knight_idle_p1.png";
+
+        <div class="transition-screen-overlay anim-fade-in">
+            <div class="transition-parchment-box anim-victory-modal-pop">
+                <div class="transition-hero-marching">
+                    <img src="@heroAvatar" 
+                         class="marching-hero-img anim-hero-march" 
+                         alt="Hrdina na ceste" />
+                </div>
+                <h2 class="transition-title">🗺️ Vstupuješ do novej oblasti...</h2>
+                <p class="transition-target">📍 @TransitionTargetText</p>
+                <div class="transition-sparkles">
+                    <span class="sparkle">✨</span>
+                    <span class="sparkle">⭐</span>
+                    <span class="sparkle">✨</span>
+                </div>
+            </div>
+        </div>
     }
 </div>
 
@@ -57,6 +89,9 @@
     private PlayerProfile Profile { get; set; } = new();
     private Level? SelectedLevel { get; set; }
 
+    private bool IsTransitioning { get; set; } = false;
+    private string TransitionTargetText { get; set; } = string.Empty;
+
     protected override async Task OnInitializedAsync()
     {
         try
@@ -85,19 +120,44 @@
         await Storage.SaveProfileAsync(Profile);
     }
 
-    private void HandleLevelSelected(Level level)
+    private async Task HandleLevelSelected(Level level)
     {
+        TransitionTargetText = $"{level.Name} (Protivník: {level.Enemy.Name})";
+        IsTransitioning = true;
+        StateHasChanged();
+
+        await Task.Delay(850);
+
         SelectedLevel = level;
         CurrentScreen = ScreenType.Battle;
+        IsTransitioning = false;
+        StateHasChanged();
     }
 
     private async Task HandleLevelCompleted(Level completedLevel)
+    {
+        UnlockNextLevel(completedLevel);
+        await Storage.SaveProfileAsync(Profile);
+        CurrentScreen = ScreenType.WorldMap;
+    }
+
+    private async Task HandleNextLevelRequested(Level nextLevel)
+    {
+        if (SelectedLevel != null)
+        {
+            UnlockNextLevel(SelectedLevel);
+            await Storage.SaveProfileAsync(Profile);
+        }
+
+        await HandleLevelSelected(nextLevel);
+    }
+
+    private void UnlockNextLevel(Level completedLevel)
     {
         Profile.CompletedLevels.Add(completedLevel.Id);
         Profile.TotalStars += completedLevel.IsBoss ? 3 : 1;
         Profile.Gold += completedLevel.IsBoss ? 50 : 20;
 
-        // Unlock next level in current world
         var worlds = DataLoader.GetWorldsForGrade(Profile.SelectedGrade);
         var currentWorld = worlds.FirstOrDefault(w => w.Levels.Any(l => l.Id == completedLevel.Id));
         if (currentWorld != null)
@@ -109,7 +169,6 @@
             }
             else
             {
-                // Unlock first level of next world
                 var nextWorldIndex = worlds.IndexOf(currentWorld) + 1;
                 if (nextWorldIndex < worlds.Count && worlds[nextWorldIndex].Levels.Any())
                 {
@@ -117,8 +176,5 @@
                 }
             }
         }
-
-        await Storage.SaveProfileAsync(Profile);
-        CurrentScreen = ScreenType.WorldMap;
     }
 }
diff --git a/src/CiselnaVyprava/Services/GameDataLoader.cs b/src/CiselnaVyprava/Services/GameDataLoader.cs
index 3e7e104..41416e0 100644
--- a/src/CiselnaVyprava/Services/GameDataLoader.cs
+++ b/src/CiselnaVyprava/Services/GameDataLoader.cs
@@ -10,6 +10,7 @@ public interface IGameDataLoader
     List<Hero> Heroes { get; }
     List<World> GetWorldsForGrade(int grade);
     Hero? GetHero(string id);
+    Level? GetNextLevel(int grade, string currentLevelId);
 }
 
 public class GameDataLoader : IGameDataLoader
@@ -60,4 +61,29 @@ public class GameDataLoader : IGameDataLoader
         return _heroes.FirstOrDefault(h => h.Id.Equals(id, StringComparison.OrdinalIgnoreCase)) 
                ?? _heroes.FirstOrDefault();
     }
+
+    public Level? GetNextLevel(int grade, string currentLevelId)
+    {
+        var worlds = GetWorldsForGrade(grade);
+        for (int w = 0; w < worlds.Count; w++)
+        {
+            var world = worlds[w];
+            for (int l = 0; l < world.Levels.Count; l++)
+            {
+                if (world.Levels[l].Id == currentLevelId)
+                {
+                    if (l + 1 < world.Levels.Count)
+                    {
+                        return world.Levels[l + 1];
+                    }
+                    else if (w + 1 < worlds.Count && worlds[w + 1].Levels.Any())
+                    {
+                        return worlds[w + 1].Levels.First();
+                    }
+                    return null;
+                }
+            }
+        }
+        return null;
+    }
 }
diff --git a/src/CiselnaVyprava/wwwroot/assets/images/heroes/archer_attack_p1.png b/src/CiselnaVyprava/wwwroot/assets/images/heroes/archer_attack_p1.png
new file mode 100644
index 0000000..6110b71
Binary files /dev/null and b/src/CiselnaVyprava/wwwroot/assets/images/heroes/archer_attack_p1.png differ
diff --git a/src/CiselnaVyprava/wwwroot/assets/images/heroes/archer_attack_p2.png b/src/CiselnaVyprava/wwwroot/assets/images/heroes/archer_attack_p2.png
new file mode 100644
index 0000000..6110b71
Binary files /dev/null and b/src/CiselnaVyprava/wwwroot/assets/images/heroes/archer_attack_p2.png differ
diff --git a/src/CiselnaVyprava/wwwroot/assets/images/heroes/archer_attack_p3.png b/src/CiselnaVyprava/wwwroot/assets/images/heroes/archer_attack_p3.png
new file mode 100644
index 0000000..6110b71
Binary files /dev/null and b/src/CiselnaVyprava/wwwroot/assets/images/heroes/archer_attack_p3.png differ
diff --git a/src/CiselnaVyprava/wwwroot/assets/images/heroes/archer_attack_p4.png b/src/CiselnaVyprava/wwwroot/assets/images/heroes/archer_attack_p4.png
new file mode 100644
index 0000000..6110b71
Binary files /dev/null and b/src/CiselnaVyprava/wwwroot/assets/images/heroes/archer_attack_p4.png differ
diff --git a/src/CiselnaVyprava/wwwroot/assets/images/heroes/archer_defend_p1.png b/src/CiselnaVyprava/wwwroot/assets/images/heroes/archer_defend_p1.png
new file mode 100644
index 0000000..69d38d6
Binary files /dev/null and b/src/CiselnaVyprava/wwwroot/assets/images/heroes/archer_defend_p1.png differ
diff --git a/src/CiselnaVyprava/wwwroot/assets/images/heroes/archer_defend_p2.png b/src/CiselnaVyprava/wwwroot/assets/images/heroes/archer_defend_p2.png
new file mode 100644
index 0000000..69d38d6
Binary files /dev/null and b/src/CiselnaVyprava/wwwroot/assets/images/heroes/archer_defend_p2.png differ
diff --git a/src/CiselnaVyprava/wwwroot/assets/images/heroes/archer_defend_p3.png b/src/CiselnaVyprava/wwwroot/assets/images/heroes/archer_defend_p3.png
new file mode 100644
index 0000000..69d38d6
Binary files /dev/null and b/src/CiselnaVyprava/wwwroot/assets/images/heroes/archer_defend_p3.png differ
diff --git a/src/CiselnaVyprava/wwwroot/assets/images/heroes/archer_defend_p4.png b/src/CiselnaVyprava/wwwroot/assets/images/heroes/archer_defend_p4.png
new file mode 100644
index 0000000..69d38d6
Binary files /dev/null and b/src/CiselnaVyprava/wwwroot/assets/images/heroes/archer_defend_p4.png differ
diff --git a/src/CiselnaVyprava/wwwroot/assets/images/heroes/archer_hurt_p1.png b/src/CiselnaVyprava/wwwroot/assets/images/heroes/archer_hurt_p1.png
new file mode 100644
index 0000000..7de3dea
Binary files /dev/null and b/src/CiselnaVyprava/wwwroot/assets/images/heroes/archer_hurt_p1.png differ
diff --git a/src/CiselnaVyprava/wwwroot/assets/images/heroes/archer_hurt_p2.png b/src/CiselnaVyprava/wwwroot/assets/images/heroes/archer_hurt_p2.png
new file mode 100644
index 0000000..7de3dea
Binary files /dev/null and b/src/CiselnaVyprava/wwwroot/assets/images/heroes/archer_hurt_p2.png differ
diff --git a/src/CiselnaVyprava/wwwroot/assets/images/heroes/archer_hurt_p3.png b/src/CiselnaVyprava/wwwroot/assets/images/heroes/archer_hurt_p3.png
new file mode 100644
index 0000000..7de3dea
Binary files /dev/null and b/src/CiselnaVyprava/wwwroot/assets/images/heroes/archer_hurt_p3.png differ
diff --git a/src/CiselnaVyprava/wwwroot/assets/images/heroes/archer_hurt_p4.png b/src/CiselnaVyprava/wwwroot/assets/images/heroes/archer_hurt_p4.png
new file mode 100644
index 0000000..7de3dea
Binary files /dev/null and b/src/CiselnaVyprava/wwwroot/assets/images/heroes/archer_hurt_p4.png differ
diff --git a/src/CiselnaVyprava/wwwroot/assets/images/heroes/archer_idle_p1.png b/src/CiselnaVyprava/wwwroot/assets/images/heroes/archer_idle_p1.png
new file mode 100644
index 0000000..7de3dea
Binary files /dev/null and b/src/CiselnaVyprava/wwwroot/assets/images/heroes/archer_idle_p1.png differ
diff --git a/src/CiselnaVyprava/wwwroot/assets/images/heroes/archer_idle_p2.png b/src/CiselnaVyprava/wwwroot/assets/images/heroes/archer_idle_p2.png
new file mode 100644
index 0000000..7de3dea
Binary files /dev/null and b/src/CiselnaVyprava/wwwroot/assets/images/heroes/archer_idle_p2.png differ
diff --git a/src/CiselnaVyprava/wwwroot/assets/images/heroes/archer_idle_p3.png b/src/CiselnaVyprava/wwwroot/assets/images/heroes/archer_idle_p3.png
new file mode 100644
index 0000000..7de3dea
Binary files /dev/null and b/src/CiselnaVyprava/wwwroot/assets/images/heroes/archer_idle_p3.png differ
diff --git a/src/CiselnaVyprava/wwwroot/assets/images/heroes/archer_idle_p4.png b/src/CiselnaVyprava/wwwroot/assets/images/heroes/archer_idle_p4.png
new file mode 100644
index 0000000..7de3dea
Binary files /dev/null and b/src/CiselnaVyprava/wwwroot/assets/images/heroes/archer_idle_p4.png differ
diff --git a/src/CiselnaVyprava/wwwroot/assets/images/heroes/mage_attack_p1.png b/src/CiselnaVyprava/wwwroot/assets/images/heroes/mage_attack_p1.png
new file mode 100644
index 0000000..6110b71
Binary files /dev/null and b/src/CiselnaVyprava/wwwroot/assets/images/heroes/mage_attack_p1.png differ
diff --git a/src/CiselnaVyprava/wwwroot/assets/images/heroes/mage_attack_p2.png b/src/CiselnaVyprava/wwwroot/assets/images/heroes/mage_attack_p2.png
new file mode 100644
index 0000000..6110b71
Binary files /dev/null and b/src/CiselnaVyprava/wwwroot/assets/images/heroes/mage_attack_p2.png differ
diff --git a/src/CiselnaVyprava/wwwroot/assets/images/heroes/mage_attack_p3.png b/src/CiselnaVyprava/wwwroot/assets/images/heroes/mage_attack_p3.png
new file mode 100644
index 0000000..6110b71
Binary files /dev/null and b/src/CiselnaVyprava/wwwroot/assets/images/heroes/mage_attack_p3.png differ
diff --git a/src/CiselnaVyprava/wwwroot/assets/images/heroes/mage_attack_p4.png b/src/CiselnaVyprava/wwwroot/assets/images/heroes/mage_attack_p4.png
new file mode 100644
index 0000000..6110b71
Binary files /dev/null and b/src/CiselnaVyprava/wwwroot/assets/images/heroes/mage_attack_p4.png differ
diff --git a/src/CiselnaVyprava/wwwroot/assets/images/heroes/mage_defend_p1.png b/src/CiselnaVyprava/wwwroot/assets/images/heroes/mage_defend_p1.png
new file mode 100644
index 0000000..69d38d6
Binary files /dev/null and b/src/CiselnaVyprava/wwwroot/assets/images/heroes/mage_defend_p1.png differ
diff --git a/src/CiselnaVyprava/wwwroot/assets/images/heroes/mage_defend_p2.png b/src/CiselnaVyprava/wwwroot/assets/images/heroes/mage_defend_p2.png
new file mode 100644
index 0000000..69d38d6
Binary files /dev/null and b/src/CiselnaVyprava/wwwroot/assets/images/heroes/mage_defend_p2.png differ
diff --git a/src/CiselnaVyprava/wwwroot/assets/images/heroes/mage_defend_p3.png b/src/CiselnaVyprava/wwwroot/assets/images/heroes/mage_defend_p3.png
new file mode 100644
index 0000000..69d38d6
Binary files /dev/null and b/src/CiselnaVyprava/wwwroot/assets/images/heroes/mage_defend_p3.png differ
diff --git a/src/CiselnaVyprava/wwwroot/assets/images/heroes/mage_defend_p4.png b/src/CiselnaVyprava/wwwroot/assets/images/heroes/mage_defend_p4.png
new file mode 100644
index 0000000..69d38d6
Binary files /dev/null and b/src/CiselnaVyprava/wwwroot/assets/images/heroes/mage_defend_p4.png differ
diff --git a/src/CiselnaVyprava/wwwroot/assets/images/heroes/mage_hurt_p1.png b/src/CiselnaVyprava/wwwroot/assets/images/heroes/mage_hurt_p1.png
new file mode 100644
index 0000000..7de3dea
Binary files /dev/null and b/src/CiselnaVyprava/wwwroot/assets/images/heroes/mage_hurt_p1.png differ
diff --git a/src/CiselnaVyprava/wwwroot/assets/images/heroes/mage_hurt_p2.png b/src/CiselnaVyprava/wwwroot/assets/images/heroes/mage_hurt_p2.png
new file mode 100644
index 0000000..7de3dea
Binary files /dev/null and b/src/CiselnaVyprava/wwwroot/assets/images/heroes/mage_hurt_p2.png differ
diff --git a/src/CiselnaVyprava/wwwroot/assets/images/heroes/mage_hurt_p3.png b/src/CiselnaVyprava/wwwroot/assets/images/heroes/mage_hurt_p3.png
new file mode 100644
index 0000000..7de3dea
Binary files /dev/null and b/src/CiselnaVyprava/wwwroot/assets/images/heroes/mage_hurt_p3.png differ
diff --git a/src/CiselnaVyprava/wwwroot/assets/images/heroes/mage_hurt_p4.png b/src/CiselnaVyprava/wwwroot/assets/images/heroes/mage_hurt_p4.png
new file mode 100644
index 0000000..7de3dea
Binary files /dev/null and b/src/CiselnaVyprava/wwwroot/assets/images/heroes/mage_hurt_p4.png differ
diff --git a/src/CiselnaVyprava/wwwroot/assets/images/heroes/mage_idle_p1.png b/src/CiselnaVyprava/wwwroot/assets/images/heroes/mage_idle_p1.png
new file mode 100644
index 0000000..7de3dea
Binary files /dev/null and b/src/CiselnaVyprava/wwwroot/assets/images/heroes/mage_idle_p1.png differ
diff --git a/src/CiselnaVyprava/wwwroot/assets/images/heroes/mage_idle_p2.png b/src/CiselnaVyprava/wwwroot/assets/images/heroes/mage_idle_p2.png
new file mode 100644
index 0000000..7de3dea
Binary files /dev/null and b/src/CiselnaVyprava/wwwroot/assets/images/heroes/mage_idle_p2.png differ
diff --git a/src/CiselnaVyprava/wwwroot/assets/images/heroes/mage_idle_p3.png b/src/CiselnaVyprava/wwwroot/assets/images/heroes/mage_idle_p3.png
new file mode 100644
index 0000000..7de3dea
Binary files /dev/null and b/src/CiselnaVyprava/wwwroot/assets/images/heroes/mage_idle_p3.png differ
diff --git a/src/CiselnaVyprava/wwwroot/assets/images/heroes/mage_idle_p4.png b/src/CiselnaVyprava/wwwroot/assets/images/heroes/mage_idle_p4.png
new file mode 100644
index 0000000..7de3dea
Binary files /dev/null and b/src/CiselnaVyprava/wwwroot/assets/images/heroes/mage_idle_p4.png differ
diff --git a/src/CiselnaVyprava/wwwroot/css/app.css b/src/CiselnaVyprava/wwwroot/css/app.css
index 7496b0c..a666f19 100644
--- a/src/CiselnaVyprava/wwwroot/css/app.css
+++ b/src/CiselnaVyprava/wwwroot/css/app.css
@@ -175,256 +175,1183 @@ html, body {
 }
 
 /* ========================================================
-   CHARACTER SELECT (100% VIEWPORT COMPACT 2-COLUMN)
+   WIZARD NEW GAME FLOW (GRADE -> HERO -> NAME & START)
    ======================================================== */
-.character-select-screen {
+.wizard-screen {
     height: 100%;
+    width: 100%;
     display: flex;
     justify-content: center;
     align-items: center;
     overflow: hidden;
+    padding: clamp(6px, 1.5vh, 16px);
 }
 
-.select-card-compact {
+.wizard-container {
     background: var(--color-parchment);
     border: 4px solid var(--color-parchment-border);
     border-radius: 20px;
     box-shadow: var(--shadow-storybook);
-    padding: clamp(12px, 2vh, 22px);
+    padding: clamp(10px, 1.8vh, 20px);
     width: 100%;
-    max-width: 900px;
+    max-width: 980px;
     max-height: 96vh;
     display: flex;
     flex-direction: column;
     justify-content: space-between;
+    overflow: hidden;
 }
 
-.select-header {
+.wizard-top-bar {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: clamp(4px, 1vh, 10px);
+    flex: 0 0 auto;
+}
+
+.btn-wizard-back {
+    background: #fff;
+    border: 2px solid #bdc3c7;
+    border-radius: 8px;
+    padding: 4px 12px;
+    font-weight: 700;
+    font-family: var(--font-main);
+    font-size: clamp(0.75rem, 1.6vh, 0.9rem);
+    cursor: pointer;
+    transition: all 0.15s ease;
+    color: #2c3e50;
+}
+
+.btn-wizard-back:hover {
+    background: #ecf0f1;
+    border-color: #95a5a6;
+}
+
+.wizard-stepper {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    font-size: clamp(0.75rem, 1.6vh, 0.9rem);
+    font-weight: 700;
+}
+
+.step-badge {
+    padding: 3px 10px;
+    border-radius: 12px;
+    background: #e2dcd0;
+    color: #7f8c8d;
+    transition: all 0.2s ease;
+}
+
+.step-badge.active {
+    background: var(--color-gold);
+    color: white;
+    box-shadow: 0 2px 6px rgba(243, 156, 18, 0.4);
+}
+
+.step-badge.completed {
+    background: #d4efdf;
+    color: #1e8449;
+    cursor: pointer;
+}
+
+.step-divider {
+    color: #bdc3c7;
+    font-size: 0.8rem;
+}
+
+.wizard-header {
     text-align: center;
-    margin-bottom: clamp(6px, 1.2vh, 12px);
+    margin-bottom: clamp(6px, 1.2vh, 14px);
+    flex: 0 0 auto;
 }
 
-.select-header .game-main-title {
-    font-size: clamp(1.6rem, 3.8vh, 2.2rem);
+.wizard-title {
+    font-size: clamp(1.4rem, 3.2vh, 2rem);
     color: var(--color-parchment-border);
     margin: 0;
-    text-shadow: none;
+    font-weight: 800;
 }
 
-.select-header .subtitle {
-    font-size: clamp(0.85rem, 1.8vh, 1rem);
+.wizard-subtitle {
+    font-size: clamp(0.8rem, 1.6vh, 0.95rem);
     color: #7f8c8d;
     margin: 2px 0 0 0;
 }
 
-.select-content-grid {
+/* --- STEP 1: GRADES GRID --- */
+.grades-grid {
     display: grid;
-    grid-template-columns: 1fr 1fr;
-    gap: clamp(10px, 2vw, 20px);
-    align-items: start;
+    grid-template-columns: repeat(3, 1fr);
+    gap: clamp(10px, 1.5vw, 18px);
+    flex: 1 1 auto;
+    align-items: stretch;
+    min-height: 0;
 }
 
-.select-col-left, .select-col-right {
+.grade-card {
+    background: white;
+    border: 3px solid #d5dbdb;
+    border-radius: 18px;
+    display: flex;
+    flex-direction: column;
+    align-items: stretch;
+    text-align: center;
+    cursor: pointer;
+    transition: all 0.2s ease;
+    box-shadow: 0 4px 10px rgba(0,0,0,0.06);
+    overflow: hidden;
+}
+
+.grade-card:hover {
+    transform: translateY(-4px);
+    box-shadow: 0 10px 22px rgba(0,0,0,0.15);
+}
+
+.grade-1-card { border-color: #3498db; }
+.grade-1-card:hover, .grade-1-card.selected { border-color: #2980b9; box-shadow: 0 8px 22px rgba(52, 152, 219, 0.35); }
+
+.grade-2-card { border-color: #e67e22; }
+.grade-2-card:hover, .grade-2-card.selected { border-color: #d35400; box-shadow: 0 8px 22px rgba(230, 126, 34, 0.35); }
+
+.grade-3-card { border-color: #9b59b6; }
+.grade-3-card:hover, .grade-3-card.selected { border-color: #8e44ad; box-shadow: 0 8px 22px rgba(155, 89, 182, 0.35); }
+
+.grade-banner-stage {
+    width: 100%;
+    height: clamp(75px, 14vh, 105px);
+    position: relative;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+.grade-banner-overlay {
+    width: 100%;
+    height: 100%;
+    background: linear-gradient(180deg, rgba(0,0,0,0.2) 0%, rgba(0,0,0,0.5) 100%);
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    gap: 2px;
+}
+
+.grade-card-icon {
+    font-size: clamp(1.4rem, 3vh, 2rem);
+    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.4));
+}
+
+.grade-card-badge {
+    font-size: clamp(0.7rem, 1.4vh, 0.8rem);
+    font-weight: 800;
+    padding: 2px 10px;
+    border-radius: 8px;
+    color: white;
+    letter-spacing: 0.5px;
+    box-shadow: 0 2px 6px rgba(0,0,0,0.3);
+}
+
+.grade-1-badge { background: #3498db; }
+.grade-2-badge { background: #e67e22; }
+.grade-3-badge { background: #9b59b6; }
+
+.grade-card-content {
+    padding: clamp(8px, 1.4vh, 14px);
+    display: flex;
+    flex-direction: column;
+    flex: 1 1 auto;
+    align-items: center;
+}
+
+.grade-card-title {
+    margin: 0 0 2px 0;
+    font-size: clamp(1.1rem, 2.3vh, 1.3rem);
+    color: #2c3e50;
+    font-weight: 800;
+}
+
+.grade-card-desc {
+    font-size: clamp(0.72rem, 1.4vh, 0.82rem);
+    color: #7f8c8d;
+    margin: 0 0 clamp(6px, 1vh, 8px) 0;
+    min-height: 2.4em;
+    line-height: 1.2;
+}
+
+.grade-topics-list {
+    list-style: none;
+    padding: 0;
+    margin: 0 0 clamp(8px, 1.4vh, 12px) 0;
+    text-align: left;
+    font-size: clamp(0.72rem, 1.35vh, 0.82rem);
+    color: #34495e;
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+    flex: 1 1 auto;
+    width: 100%;
+}
+
+.grade-topics-list li {
+    background: #f8f9f9;
+    padding: 3px 8px;
+    border-radius: 6px;
+    border-left: 3px solid #bdc3c7;
+}
+
+.grade-1-card .grade-topics-list li { border-left-color: #3498db; }
+.grade-2-card .grade-topics-list li { border-left-color: #e67e22; }
+.grade-3-card .grade-topics-list li { border-left-color: #9b59b6; }
+
+.btn-grade-select {
+    width: 100%;
+    color: white;
+    border: none;
+    border-radius: 10px;
+    padding: clamp(6px, 1.2vh, 10px) 12px;
+    font-weight: 800;
+    font-family: var(--font-main);
+    font-size: clamp(0.85rem, 1.7vh, 0.95rem);
+    cursor: pointer;
+    transition: all 0.15s ease;
+    margin-top: auto;
+}
+
+.btn-grade-1 { background: #3498db; box-shadow: 0 3px 0 #2471a3; }
+.btn-grade-1:hover { background: #2980b9; transform: translateY(-1px); }
+
+.btn-grade-2 { background: #e67e22; box-shadow: 0 3px 0 #b95c00; }
+.btn-grade-2:hover { background: #d35400; transform: translateY(-1px); }
+
+.btn-grade-3 { background: #9b59b6; box-shadow: 0 3px 0 #6c3483; }
+.btn-grade-3:hover { background: #8e44ad; transform: translateY(-1px); }
+
+/* --- STEP 2: HERO SHOWCASE GRID --- */
+.hero-showcase-grid {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    gap: clamp(10px, 1.5vw, 18px);
+    flex: 1 1 auto;
+    align-items: stretch;
+    min-height: 0;
+}
+
+.hero-showcase-card {
+    background: white;
+    border: 3px solid #d5dbdb;
+    border-radius: 16px;
+    padding: clamp(8px, 1.4vh, 14px);
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    text-align: center;
+    cursor: pointer;
+    transition: all 0.2s ease;
+    box-shadow: 0 4px 10px rgba(0,0,0,0.05);
+    position: relative;
+    overflow: hidden;
+}
+
+.hero-showcase-card:hover {
+    transform: translateY(-4px);
+    box-shadow: 0 8px 20px rgba(0,0,0,0.15);
+}
+
+.hero-theme-knight { border-color: #f39c12; }
+.hero-theme-knight:hover, .hero-theme-knight.selected { border-color: #d35400; background: #fef9e7; }
+
+.hero-theme-mage { border-color: #9b59b6; }
+.hero-theme-mage:hover, .hero-theme-mage.selected { border-color: #8e44ad; background: #fbf6fd; }
+
+.hero-theme-archer { border-color: #27ae60; }
+.hero-theme-archer:hover, .hero-theme-archer.selected { border-color: #229954; background: #eafaf1; }
+
+.hero-card-banner {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    margin-bottom: 4px;
+}
+
+.hero-crest-icon { font-size: clamp(1.2rem, 2.5vh, 1.5rem); }
+.hero-class-label { font-size: 0.75rem; font-weight: 700; color: #7f8c8d; text-transform: uppercase; }
+
+.hero-portrait-stage {
+    width: 100%;
+    height: clamp(90px, 18vh, 140px);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    position: relative;
+    margin: 2px 0 6px 0;
+}
+
+.hero-portrait-img {
+    max-height: 100%;
+    max-width: 100%;
+    object-fit: contain;
+    filter: drop-shadow(0 6px 10px rgba(0,0,0,0.25));
+}
+
+.hero-info-box {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 4px;
+    flex: 1 1 auto;
+    width: 100%;
+}
+
+.hero-title-name {
+    margin: 0;
+    font-size: clamp(1rem, 2.2vh, 1.25rem);
+    color: #2c3e50;
+    font-weight: 800;
+}
+
+.hero-lore-desc {
+    font-size: clamp(0.7rem, 1.4vh, 0.8rem);
+    color: #7f8c8d;
+    margin: 0;
+    min-height: 2.4em;
+    line-height: 1.25;
+}
+
+.hero-skill-pill {
+    background: #f4f6f6;
+    border: 1px dashed #bdc3c7;
+    border-radius: 6px;
+    padding: 2px 8px;
+    font-size: clamp(0.7rem, 1.3vh, 0.8rem);
+    color: #34495e;
+    margin: 2px 0;
+}
+
+.hero-stats-row {
+    display: flex;
+    gap: 6px;
+    margin-bottom: 6px;
+}
+
+.stat-tag {
+    font-size: 0.7rem;
+    font-weight: 700;
+    background: rgba(0,0,0,0.05);
+    padding: 2px 6px;
+    border-radius: 4px;
+    color: #2c3e50;
+}
+
+.btn-hero-select {
+    width: 100%;
+    background: var(--color-forest);
+    color: white;
+    border: none;
+    border-radius: 10px;
+    padding: clamp(6px, 1.2vh, 10px) 12px;
+    font-weight: 800;
+    font-family: var(--font-main);
+    font-size: clamp(0.85rem, 1.7vh, 0.95rem);
+    cursor: pointer;
+    box-shadow: 0 3px 0 #1e8449;
+    transition: all 0.15s ease;
+}
+
+.btn-hero-select:hover {
+    background: #2ecc71;
+    transform: translateY(-1px);
+}
+
+/* --- STEP 3: NAMING & START QUEST --- */
+.wizard-name-container {
+    max-width: 860px;
+}
+
+.naming-content-stage {
+    display: grid;
+    grid-template-columns: 1fr 1.3fr;
+    gap: clamp(14px, 2.5vw, 24px);
+    align-items: center;
+    flex: 1 1 auto;
+    min-height: 0;
+}
+
+.naming-hero-preview {
+    background: white;
+    border: 3px solid var(--color-parchment-border);
+    border-radius: 16px;
+    padding: clamp(12px, 2vh, 18px);
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    text-align: center;
+    box-shadow: 0 4px 12px rgba(0,0,0,0.06);
+}
+
+.hero-stage-pedestal {
+    width: 100%;
+    height: clamp(110px, 22vh, 160px);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    background: radial-gradient(circle, rgba(243, 156, 18, 0.2) 0%, rgba(255, 255, 255, 0) 70%);
+    border-radius: 12px;
+    margin-bottom: 6px;
+}
+
+.naming-hero-img {
+    max-height: 100%;
+    max-width: 100%;
+    object-fit: contain;
+    filter: drop-shadow(0 8px 14px rgba(0,0,0,0.3));
+}
+
+.naming-badges-row {
+    display: flex;
+    gap: 6px;
+    margin-bottom: 6px;
+}
+
+.grade-pill-badge {
+    background: var(--color-gold);
+    color: white;
+    font-size: 0.75rem;
+    font-weight: 700;
+    padding: 2px 8px;
+    border-radius: 8px;
+}
+
+.hero-pill-badge {
+    background: #34495e;
+    color: white;
+    font-size: 0.75rem;
+    font-weight: 700;
+    padding: 2px 8px;
+    border-radius: 8px;
+}
+
+.naming-stat-summary {
+    display: flex;
+    flex-direction: column;
+    gap: 2px;
+    font-size: clamp(0.7rem, 1.4vh, 0.8rem);
+    color: #566573;
+    font-weight: 600;
+}
+
+.naming-form-box {
     display: flex;
     flex-direction: column;
     gap: clamp(8px, 1.5vh, 14px);
 }
 
-.selection-section {
-    margin-bottom: 0;
+.form-group {
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
 }
 
-.step-title {
+.form-label {
     font-size: clamp(0.95rem, 2vh, 1.15rem);
-    color: #34495e;
-    margin: 0 0 6px 0;
-    border-bottom: 2px dashed #d5dbdb;
-    padding-bottom: 3px;
-    font-weight: 700;
+    font-weight: 800;
+    color: #2c3e50;
 }
 
-.grade-toggle-group {
-    display: flex;
-    flex-direction: column;
-    gap: 6px;
-}
-
-.grade-btn {
-    background: #fff;
-    border: 2px solid #bdc3c7;
-    border-radius: 10px;
-    padding: clamp(6px, 1vh, 10px) 12px;
-    cursor: pointer;
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    font-family: var(--font-main);
-    transition: all 0.15s ease;
-}
-
-.grade-btn.active {
-    border-color: var(--color-gold);
-    background: #fef9e7;
-    box-shadow: 0 2px 8px rgba(243, 156, 18, 0.3);
-}
-
-.grade-badge { font-size: clamp(0.9rem, 2vh, 1.05rem); font-weight: 700; color: #2c3e50; }
-.grade-desc { font-size: 0.8rem; color: #7f8c8d; }
-
-.heroes-grid {
-    display: flex;
-    flex-direction: column;
-    gap: 8px;
-}
-
-.hero-card {
-    background: #fff;
-    border: 2px solid #bdc3c7;
-    border-radius: 12px;
-    padding: clamp(6px, 1.2vh, 10px) 12px;
-    display: grid;
-    grid-template-columns: auto 1fr auto;
-    align-items: center;
-    gap: 12px;
-    cursor: pointer;
-    transition: all 0.15s ease;
-    text-align: left;
-}
-
-.hero-card.selected-card {
-    border-color: var(--color-gold);
-    background: #fef9e7;
-    box-shadow: 0 3px 10px rgba(243, 156, 18, 0.35);
-}
-
-.hero-avatar { font-size: 1.8rem; }
-.hero-name { margin: 0; font-size: 1rem; color: #2c3e50; font-weight: 700; }
-.hero-title { font-size: 0.75rem; color: #95a5a6; display: block; }
-.hero-skill { font-size: 0.75rem; background: #eaeded; padding: 2px 6px; border-radius: 6px; }
-
-.name-field-row {
+.name-input-with-dice {
     display: flex;
     gap: 8px;
+    align-items: stretch;
+    width: 100%;
 }
 
-.hero-name-input {
+.hero-name-big-input {
     flex: 1;
-    padding: clamp(8px, 1.5vh, 12px);
-    font-size: clamp(0.9rem, 2vh, 1.05rem);
+    padding: clamp(8px, 1.5vh, 12px) 14px;
+    font-size: clamp(1rem, 2.2vh, 1.25rem);
     font-family: var(--font-main);
-    border: 2px solid #bdc3c7;
-    border-radius: 10px;
+    font-weight: 700;
+    border: 3px solid var(--color-gold);
+    border-radius: 12px;
+    background: white;
     outline: none;
+    box-shadow: inset 0 2px 4px rgba(0,0,0,0.06);
+    color: #2c3e50;
 }
 
-.btn-start-quest {
-    background: var(--color-forest);
-    color: white;
-    font-size: clamp(0.95rem, 2vh, 1.15rem);
-    font-weight: 700;
-    font-family: var(--font-main);
-    border: none;
-    border-radius: 10px;
-    padding: clamp(8px, 1.5vh, 12px) clamp(12px, 2vw, 20px);
+.hero-name-big-input:focus {
+    border-color: #d35400;
+    box-shadow: 0 0 10px rgba(243, 156, 18, 0.4);
+}
+
+.btn-dice-randomizer {
+    background: #fef9e7;
+    border: 2px solid var(--color-gold);
+    border-radius: 12px;
+    padding: clamp(6px, 1vh, 10px) 14px;
     cursor: pointer;
-    box-shadow: 0 3px 0 #1e8449;
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    font-family: var(--font-main);
+    font-weight: 800;
+    font-size: clamp(0.8rem, 1.6vh, 0.95rem);
+    color: #b7950b;
+    box-shadow: 0 3px 0 var(--color-gold-dark);
+    transition: all 0.15s ease;
     white-space: nowrap;
 }
 
+.btn-dice-randomizer:hover {
+    background: #fcf3cf;
+    transform: translateY(-2px);
+    box-shadow: 0 5px 0 var(--color-gold-dark);
+}
+
+.btn-dice-randomizer:active, .btn-dice-randomizer.rolling {
+    transform: translateY(2px);
+    box-shadow: 0 1px 0 var(--color-gold-dark);
+}
+
+.dice-icon {
+    font-size: clamp(1.3rem, 2.8vh, 1.7rem);
+    display: inline-block;
+    transition: transform 0.3s ease;
+}
+
+.btn-dice-randomizer.rolling .dice-icon {
+    animation: diceSpin 0.35s ease-in-out;
+}
+
+@keyframes diceSpin {
+    0% { transform: rotate(0deg) scale(1); }
+    50% { transform: rotate(180deg) scale(1.3); }
+    100% { transform: rotate(360deg) scale(1); }
+}
+
+.quick-names-section {
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+}
+
+.quick-names-title {
+    font-size: 0.8rem;
+    color: #7f8c8d;
+    font-weight: 600;
+}
+
+.quick-names-grid {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 6px;
+}
+
+.name-chip-btn {
+    background: white;
+    border: 1.5px solid #bdc3c7;
+    border-radius: 8px;
+    padding: 3px 10px;
+    font-size: clamp(0.75rem, 1.5vh, 0.85rem);
+    font-weight: 600;
+    font-family: var(--font-main);
+    color: #34495e;
+    cursor: pointer;
+    transition: all 0.15s ease;
+}
+
+.name-chip-btn:hover {
+    border-color: var(--color-gold);
+    background: #fef9e7;
+}
+
+.name-chip-btn.active-chip {
+    background: var(--color-gold);
+    border-color: var(--color-gold-dark);
+    color: white;
+    font-weight: 700;
+}
+
+.naming-action-footer {
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+    margin-top: 4px;
+}
+
+.btn-grand-start {
+    background: linear-gradient(180deg, #2ecc71 0%, #27ae60 100%);
+    color: white;
+    font-size: clamp(1.05rem, 2.4vh, 1.3rem);
+    font-weight: 800;
+    font-family: var(--font-main);
+    border: none;
+    border-radius: 12px;
+    padding: clamp(10px, 2vh, 16px);
+    cursor: pointer;
+    box-shadow: 0 4px 0 #1e8449, 0 6px 16px rgba(39, 174, 96, 0.4);
+    transition: all 0.15s ease;
+    text-shadow: 1px 1px 2px rgba(0,0,0,0.2);
+}
+
+.btn-grand-start:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 6px 0 #1e8449, 0 10px 22px rgba(39, 174, 96, 0.5);
+}
+
+.btn-grand-start:active {
+    transform: translateY(2px);
+    box-shadow: 0 2px 0 #1e8449;
+}
+
+.autosave-notice {
+    font-size: 0.75rem;
+    color: #7f8c8d;
+    margin: 0;
+    text-align: center;
+}
+
 /* ========================================================
-   WORLD MAP (100% VIEWPORT FIT)
+   WORLD MAP & RICH LEVEL CARDS (100% VIEWPORT FIT)
    ======================================================== */
 .world-map-screen {
     height: 100%;
+    width: 100%;
     display: flex;
     flex-direction: column;
-    gap: clamp(8px, 1.5vh, 14px);
+    gap: clamp(6px, 1.2vh, 12px);
     overflow: hidden;
+    padding: clamp(4px, 1vh, 10px);
 }
 
 .map-top-bar {
     background: var(--color-parchment);
     border: 3px solid var(--color-parchment-border);
-    border-radius: 12px;
-    padding: clamp(6px, 1vh, 10px) 16px;
+    border-radius: 14px;
+    padding: clamp(4px, 0.8vh, 8px) 14px;
     display: flex;
     justify-content: space-between;
     align-items: center;
     flex: 0 0 auto;
+    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
 }
 
 .player-pill {
     display: flex;
     align-items: center;
-    gap: 8px;
-    font-weight: 700;
-    font-size: clamp(0.9rem, 2vh, 1.1rem);
+    gap: 10px;
+}
+
+.mini-hero-avatar {
+    width: clamp(34px, 5vh, 44px);
+    height: clamp(34px, 5vh, 44px);
+    object-fit: contain;
+    border-radius: 50%;
+    background: #fff;
+    border: 2px solid var(--color-gold);
+    padding: 2px;
+    box-shadow: 0 2px 6px rgba(0,0,0,0.15);
+}
+
+.player-info-text {
+    display: flex;
+    flex-direction: column;
+    text-align: left;
+}
+
+.player-name {
+    font-weight: 800;
+    font-size: clamp(0.95rem, 2vh, 1.15rem);
+    color: #2c3e50;
+    line-height: 1.1;
 }
 
 .grade-tag {
     background: var(--color-gold);
     color: white;
     font-size: 0.75rem;
-    padding: 2px 6px;
+    font-weight: 700;
+    padding: 1px 6px;
     border-radius: 6px;
+    margin-top: 2px;
+    display: inline-block;
+    width: fit-content;
 }
 
-.btn-change-hero {
-    background: #ecf0f1;
-    border: 2px solid #bdc3c7;
-    border-radius: 8px;
-    padding: 4px 10px;
-    font-family: var(--font-main);
-    cursor: pointer;
-    font-weight: 600;
-    font-size: 0.85rem;
-}
-
-.worlds-carousel {
-    flex: 1 1 auto;
-    overflow-y: auto;
+.stats-pill-group {
     display: flex;
-    flex-direction: column;
-    gap: clamp(8px, 1.5vh, 14px);
-    padding-right: 4px;
+    gap: 8px;
 }
 
-.world-card {
-    background: var(--color-parchment);
-    border: 3px solid var(--color-parchment-border);
-    border-radius: 16px;
-    padding: clamp(10px, 2vh, 18px);
-    box-shadow: var(--shadow-storybook);
-}
-
-.world-header h2 { margin: 0; font-size: clamp(1.1rem, 2.5vh, 1.4rem); color: #2c3e50; }
-.world-header p { color: #7f8c8d; margin: 2px 0 clamp(8px, 1.5vh, 12px) 0; font-size: clamp(0.8rem, 1.8vh, 0.95rem); }
-
-.levels-path {
-    display: flex;
-    gap: clamp(8px, 1.5vw, 14px);
-    flex-wrap: wrap;
-}
-
-.level-node {
+.stat-badge {
     background: white;
     border: 2px solid #bdc3c7;
-    border-radius: 12px;
-    padding: clamp(8px, 1.5vh, 12px) 14px;
+    border-radius: 8px;
+    padding: 3px 10px;
+    font-size: clamp(0.8rem, 1.6vh, 0.95rem);
+    font-weight: 700;
+    color: #2c3e50;
+}
+
+.stat-badge.stars-badge { border-color: var(--color-gold); background: #fefcf5; }
+.stat-badge.gold-badge { border-color: #f1c40f; background: #fffdf2; }
+
+.btn-top-action {
+    background: #fff;
+    border: 2px solid #bdc3c7;
+    border-radius: 8px;
+    padding: 4px 12px;
+    font-family: var(--font-main);
+    font-weight: 700;
+    font-size: clamp(0.75rem, 1.6vh, 0.85rem);
+    cursor: pointer;
+    transition: all 0.15s ease;
+    color: #34495e;
+}
+
+.btn-top-action:hover {
+    background: #f4f6f7;
+    border-color: var(--color-gold);
+    transform: translateY(-1px);
+}
+
+/* WORLD MAP CONTENT AREA */
+.world-map-content {
+    flex: 1 1 auto;
     display: flex;
     flex-direction: column;
+    gap: clamp(6px, 1.2vh, 10px);
+    min-height: 0;
+    overflow: hidden;
+}
+
+/* WORLD TABS NAV */
+.world-tabs-nav {
+    display: flex;
+    gap: clamp(6px, 1vw, 12px);
+    flex: 0 0 auto;
+    overflow-x: auto;
+    padding-bottom: 2px;
+}
+
+.world-tab-btn {
+    flex: 1 1 auto;
+    min-width: 120px;
+    background: #fff;
+    border: 2px solid #bdc3c7;
+    border-radius: 12px;
+    padding: clamp(6px, 1vh, 10px) 10px;
+    display: flex;
     align-items: center;
-    min-width: 110px;
+    justify-content: center;
+    gap: 6px;
     cursor: pointer;
     font-family: var(--font-main);
     transition: all 0.15s ease;
+    box-shadow: 0 2px 6px rgba(0,0,0,0.05);
 }
 
-.level-node.unlocked { border-color: var(--color-gold); box-shadow: 0 3px 6px rgba(0,0,0,0.1); }
-.level-node.completed { border-color: var(--color-forest); background: #e8f8f5; }
-.level-node.boss-node { border-color: var(--color-crimson); background: #fdedec; }
-.node-icon { font-size: clamp(1.3rem, 3vh, 1.8rem); margin-bottom: 2px; }
-.level-title { font-weight: 700; font-size: clamp(0.8rem, 1.8vh, 0.9rem); }
+.world-tab-btn:hover:not(:disabled) {
+    transform: translateY(-2px);
+    border-color: var(--color-gold);
+}
+
+.world-tab-btn.active {
+    background: var(--color-gold);
+    border-color: var(--color-gold-dark);
+    color: white;
+    box-shadow: 0 4px 10px rgba(243, 156, 18, 0.4);
+}
+
+.world-tab-btn.locked {
+    opacity: 0.6;
+    background: #eaeded;
+    cursor: not-allowed;
+    border-style: dashed;
+}
+
+.world-tab-btn.world-completed {
+    border-color: #27ae60;
+}
+
+.world-tab-btn.active.world-completed {
+    background: #27ae60;
+    border-color: #1e8449;
+}
+
+.world-tab-icon { font-size: clamp(1rem, 2.2vh, 1.3rem); }
+.world-tab-label { font-weight: 800; font-size: clamp(0.8rem, 1.7vh, 0.95rem); }
+.world-tab-progress {
+    font-size: 0.75rem;
+    font-weight: 700;
+    background: rgba(0,0,0,0.08);
+    padding: 1px 6px;
+    border-radius: 6px;
+}
+
+.world-tab-btn.active .world-tab-progress {
+    background: rgba(255, 255, 255, 0.25);
+    color: white;
+}
+
+/* ACTIVE WORLD CONTAINER */
+.active-world-card {
+    flex: 1 1 auto;
+    background: var(--color-parchment);
+    border: 4px solid var(--color-parchment-border);
+    border-radius: 18px;
+    box-shadow: var(--shadow-storybook);
+    padding: clamp(8px, 1.5vh, 16px);
+    display: flex;
+    flex-direction: column;
+    gap: clamp(6px, 1.2vh, 12px);
+    min-height: 0;
+    overflow: hidden;
+}
+
+.world-header-row {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    border-bottom: 2px dashed #d5dbdb;
+    padding-bottom: clamp(4px, 0.8vh, 8px);
+    flex: 0 0 auto;
+}
+
+.world-title-col { text-align: left; }
+.active-world-title {
+    margin: 0;
+    font-size: clamp(1.1rem, 2.4vh, 1.4rem);
+    color: #2c3e50;
+    font-weight: 800;
+}
+
+.active-world-desc {
+    margin: 2px 0 0 0;
+    color: #7f8c8d;
+    font-size: clamp(0.75rem, 1.5vh, 0.85rem);
+}
+
+.world-progress-col {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-end;
+    gap: 3px;
+}
+
+.progress-label-row {
+    font-size: clamp(0.75rem, 1.5vh, 0.85rem);
+    color: #34495e;
+}
+
+.world-progress-bar {
+    width: clamp(120px, 15vw, 180px);
+    height: 10px;
+    background: #e0d7c6;
+    border: 2px solid var(--color-parchment-border);
+    border-radius: 6px;
+    overflow: hidden;
+}
+
+.world-progress-fill {
+    height: 100%;
+    background: linear-gradient(90deg, #f39c12, #27ae60);
+    border-radius: 4px;
+    transition: width 0.4s ease;
+}
+
+/* LEVELS RICH CARDS GRID */
+.levels-rich-grid {
+    flex: 1 1 auto;
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
+    gap: clamp(8px, 1.5vw, 16px);
+    align-items: stretch;
+    min-height: 0;
+    overflow-y: auto;
+    padding: 2px;
+}
+
+.level-rich-card {
+    background: white;
+    border: 3px solid #d5dbdb;
+    border-radius: 16px;
+    padding: clamp(8px, 1.4vh, 12px);
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    text-align: center;
+    box-shadow: 0 4px 10px rgba(0,0,0,0.06);
+    position: relative;
+    transition: all 0.2s ease;
+}
+
+.level-rich-card:hover {
+    transform: translateY(-3px);
+    box-shadow: 0 8px 18px rgba(0,0,0,0.12);
+}
+
+/* Card Status Variants */
+.level-rich-card.status-completed {
+    border-color: #27ae60;
+    background: #fdfefe;
+}
+
+.level-rich-card.status-current {
+    border-color: var(--color-gold);
+    background: #fffdf5;
+    box-shadow: 0 0 14px rgba(243, 156, 18, 0.35);
+}
+
+.level-rich-card.status-locked {
+    border-color: #bdc3c7;
+    background: #f2f4f4;
+    opacity: 0.75;
+}
+
+.level-rich-card.boss-card {
+    border-color: var(--color-crimson);
+}
+
+.level-rich-card.boss-card.status-current {
+    box-shadow: 0 0 16px rgba(231, 76, 60, 0.4);
+    background: #fffcfb;
+}
+
+/* Card Status Banner */
+.card-status-banner {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 6px;
+    margin-bottom: 4px;
+    min-height: 20px;
+}
+
+.badge-completed {
+    background: #d4efdf;
+    color: #1e8449;
+    font-size: 0.7rem;
+    font-weight: 800;
+    padding: 2px 8px;
+    border-radius: 6px;
+}
+
+.stars-awarded { font-size: 0.8rem; }
+
+.badge-active {
+    background: #fef9e7;
+    border: 1px solid var(--color-gold);
+    color: #d35400;
+    font-size: 0.7rem;
+    font-weight: 800;
+    padding: 2px 8px;
+    border-radius: 6px;
+}
+
+.badge-boss {
+    background: var(--color-crimson);
+    color: white;
+    font-size: 0.7rem;
+    font-weight: 800;
+    padding: 2px 8px;
+    border-radius: 6px;
+}
+
+.badge-locked {
+    background: #d5dbdb;
+    color: #566573;
+    font-size: 0.7rem;
+    font-weight: 700;
+    padding: 2px 8px;
+    border-radius: 6px;
+}
+
+/* ENEMY AVATAR STAGE */
+.level-enemy-stage {
+    width: 100%;
+    height: clamp(80px, 15vh, 110px);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    position: relative;
+    margin-bottom: 4px;
+}
+
+.enemy-avatar-wrapper {
+    position: relative;
+    width: clamp(75px, 14vh, 100px);
+    height: clamp(75px, 14vh, 100px);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    border-radius: 50%;
+    background: radial-gradient(circle, rgba(255, 255, 255, 0.9) 0%, rgba(240, 240, 240, 0.5) 70%);
+}
+
+.enemy-avatar-wrapper.active-glow {
+    background: radial-gradient(circle, rgba(243, 156, 18, 0.25) 0%, rgba(255, 255, 255, 0) 70%);
+}
+
+.enemy-avatar-wrapper.defeated-glow {
+    background: radial-gradient(circle, rgba(39, 174, 96, 0.2) 0%, rgba(255, 255, 255, 0) 70%);
+}
+
+.enemy-avatar-wrapper.locked-silhouette {
+    filter: grayscale(1) contrast(0.7);
+}
+
+.level-enemy-img {
+    max-height: 85%;
+    max-width: 85%;
+    object-fit: contain;
+    filter: drop-shadow(0 4px 8px rgba(0,0,0,0.25));
+}
+
+.lock-overlay {
+    position: absolute;
+    font-size: 1.8rem;
+    color: #7f8c8d;
+    background: rgba(255, 255, 255, 0.7);
+    width: 44px;
+    height: 44px;
+    border-radius: 50%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+.check-overlay {
+    position: absolute;
+    bottom: -2px;
+    right: -2px;
+    width: 24px;
+    height: 24px;
+    border-radius: 50%;
+    background: #27ae60;
+    color: white;
+    font-weight: 800;
+    font-size: 0.85rem;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    border: 2px solid white;
+    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
+}
+
+/* LEVEL INFO BODY */
+.level-info-body {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 3px;
+    flex: 1 1 auto;
+    width: 100%;
+}
+
+.level-number-tag {
+    font-size: 0.7rem;
+    font-weight: 700;
+    color: #95a5a6;
+    text-transform: uppercase;
+}
+
+.level-name-title {
+    margin: 0;
+    font-size: clamp(0.9rem, 1.8vh, 1.1rem);
+    font-weight: 800;
+    color: #2c3e50;
+    line-height: 1.15;
+}
+
+.level-enemy-name {
+    font-size: clamp(0.7rem, 1.3vh, 0.8rem);
+    color: #7f8c8d;
+}
+
+.level-math-pill {
+    background: #f4f6f6;
+    border: 1px solid #d5dbdb;
+    border-radius: 6px;
+    padding: 2px 8px;
+    font-size: clamp(0.68rem, 1.3vh, 0.78rem);
+    color: #34495e;
+    font-weight: 600;
+    margin: 2px 0;
+}
+
+.level-stats-row {
+    display: flex;
+    gap: 6px;
+    margin-top: 2px;
+    margin-bottom: 4px;
+}
+
+.stat-bubble {
+    font-size: 0.68rem;
+    font-weight: 700;
+    background: rgba(0,0,0,0.04);
+    padding: 1px 6px;
+    border-radius: 4px;
+    color: #566573;
+}
+
+/* LEVEL CARD FOOTER BUTTONS */
+.level-card-footer {
+    width: 100%;
+    margin-top: auto;
+}
+
+.btn-level-action {
+    width: 100%;
+    border: none;
+    border-radius: 10px;
+    padding: clamp(6px, 1.2vh, 9px) 10px;
+    font-weight: 800;
+    font-family: var(--font-main);
+    font-size: clamp(0.8rem, 1.6vh, 0.9rem);
+    cursor: pointer;
+    transition: all 0.15s ease;
+}
+
+.btn-replay {
+    background: #f39c12;
+    color: white;
+    box-shadow: 0 3px 0 #b9770e;
+}
+
+.btn-replay:hover {
+    background: #f1c40f;
+    transform: translateY(-1px);
+}
+
+.btn-battle {
+    background: var(--color-forest);
+    color: white;
+    box-shadow: 0 3px 0 #1e8449;
+}
+
+.btn-battle:hover {
+    background: #2ecc71;
+    transform: translateY(-1px);
+}
+
+.btn-boss-battle {
+    background: linear-gradient(180deg, #e74c3c 0%, #c0392b 100%);
+    box-shadow: 0 3px 0 #922b21;
+}
+
+.btn-boss-battle:hover {
+    background: #e74c3c;
+    transform: translateY(-1px);
+}
+
+.btn-locked {
+    background: #d5dbdb;
+    color: #7f8c8d;
+    cursor: not-allowed;
+}
 
 /* ========================================================
    BATTLE ARENA (100% VIEWPORT FIT - NO SCROLL)
@@ -661,42 +1588,364 @@ html, body {
 .choice-btn:active { transform: translateY(2px); box-shadow: 0 2px 0 var(--color-gold-dark); }
 
 /* VICTORY / DEFEAT CARDS */
-.battle-end-card { padding: clamp(12px, 2vh, 20px); border-radius: 12px; }
-.battle-end-card h2 { font-size: clamp(1.5rem, 3.5vh, 2rem); margin: 0; }
-.battle-end-card p { font-size: clamp(0.95rem, 2vh, 1.1rem); margin: 6px 0 14px 0; }
-.victory-card { background: #d4efdf; border: 3px solid #27ae60; color: #1e8449; }
-.defeat-card { background: #fadbd8; border: 3px solid #e74c3c; color: #922b21; }
-
-.action-btn {
-    font-size: clamp(0.95rem, 2vh, 1.15rem);
-    font-weight: 700;
-    font-family: var(--font-main);
-    padding: 8px 22px;
-    border: none;
-    border-radius: 10px;
-    cursor: pointer;
+/* ========================================================
+   VICTORY & DEFEAT CELEBRATION MODAL (FULLSCREEN POPUP)
+   ======================================================== */
+.battle-end-overlay {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100vw;
+    height: 100vh;
+    background: rgba(0, 0, 0, 0.75);
+    backdrop-filter: blur(6px);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    z-index: 9999;
+    padding: clamp(10px, 2vh, 20px);
 }
 
-.next-level-btn { background: var(--color-forest); color: white; }
-.retry-btn { background: var(--color-crimson); color: white; }
+.celebration-modal {
+    background: var(--color-parchment);
+    border: 5px solid var(--color-parchment-border);
+    border-radius: 24px;
+    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.6);
+    padding: clamp(14px, 2.5vh, 24px);
+    width: 100%;
+    max-width: 580px;
+    max-height: 94vh;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    text-align: center;
+    position: relative;
+    overflow: hidden;
+}
+
+.celebration-modal.victory-theme {
+    border-color: #f39c12;
+    background: linear-gradient(180deg, #fdfbf7 0%, #faebd7 100%);
+}
+
+.celebration-modal.defeat-theme {
+    border-color: #e74c3c;
+    background: linear-gradient(180deg, #fdfefe 0%, #fadbd8 100%);
+}
+
+.celebration-particles {
+    position: absolute;
+    top: 10px;
+    left: 0;
+    right: 0;
+    display: flex;
+    justify-content: space-around;
+    pointer-events: none;
+}
+
+.particle {
+    font-size: clamp(1.4rem, 3vh, 2rem);
+    animation: particleFloat 2s infinite ease-in-out alternate;
+}
+
+.star-p1 { animation-delay: 0s; }
+.star-p2 { animation-delay: 0.4s; }
+.star-p3 { animation-delay: 0.8s; }
+.star-p4 { animation-delay: 1.2s; }
+
+@keyframes particleFloat {
+    0% { transform: translateY(0) scale(1) rotate(0deg); }
+    100% { transform: translateY(-12px) scale(1.25) rotate(20deg); }
+}
+
+.celebration-header {
+    margin-bottom: clamp(6px, 1.2vh, 12px);
+}
+
+.celebration-crown {
+    font-size: clamp(2.2rem, 5vh, 3.2rem);
+    display: block;
+    animation: bounce 1s infinite alternate;
+}
+
+.celebration-title {
+    margin: 2px 0;
+    font-size: clamp(1.6rem, 3.8vh, 2.3rem);
+    color: #b7950b;
+    font-weight: 800;
+    text-shadow: 1px 1px 2px rgba(0,0,0,0.1);
+}
+
+.celebration-subtitle {
+    margin: 0;
+    font-size: clamp(0.85rem, 1.8vh, 1rem);
+    color: #7f8c8d;
+    font-weight: 600;
+}
+
+.celebration-body {
+    display: grid;
+    grid-template-columns: 1fr 1.2fr;
+    gap: clamp(10px, 2vw, 18px);
+    align-items: center;
+    width: 100%;
+    margin-bottom: clamp(10px, 2vh, 18px);
+}
+
+.celebration-hero-stage {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    height: clamp(110px, 22vh, 160px);
+    background: radial-gradient(circle, rgba(243, 156, 18, 0.3) 0%, rgba(255, 255, 255, 0) 70%);
+    border-radius: 16px;
+}
+
+.celebration-hero-img {
+    max-height: 85%;
+    max-width: 85%;
+    object-fit: contain;
+    filter: drop-shadow(0 8px 16px rgba(243, 156, 18, 0.4));
+}
+
+.victory-hero-name {
+    font-size: 0.8rem;
+    font-weight: 700;
+    color: #2c3e50;
+    margin-top: 2px;
+}
+
+.celebration-rewards-card {
+    background: white;
+    border: 2px solid #f39c12;
+    border-radius: 14px;
+    padding: clamp(8px, 1.5vh, 14px);
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+    box-shadow: 0 4px 10px rgba(0,0,0,0.06);
+}
+
+.reward-row {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    text-align: left;
+}
+
+.reward-icon { font-size: clamp(1.4rem, 3vh, 1.8rem); }
+
+.reward-info {
+    display: flex;
+    flex-direction: column;
+}
+
+.reward-info strong {
+    font-size: clamp(0.9rem, 1.8vh, 1.1rem);
+    color: #27ae60;
+    font-weight: 800;
+}
+
+.reward-info span {
+    font-size: 0.75rem;
+    color: #7f8c8d;
+}
+
+.celebration-actions {
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+}
+
+.btn-grand-celebration {
+    width: 100%;
+    padding: clamp(10px, 2vh, 15px);
+    border: none;
+    border-radius: 12px;
+    font-size: clamp(1rem, 2.2vh, 1.25rem);
+    font-weight: 800;
+    font-family: var(--font-main);
+    cursor: pointer;
+    transition: all 0.15s ease;
+}
+
+.btn-next-quest {
+    background: linear-gradient(180deg, #2ecc71 0%, #27ae60 100%);
+    color: white;
+    box-shadow: 0 4px 0 #1e8449, 0 8px 20px rgba(39, 174, 96, 0.4);
+    animation: pulse 1.2s infinite;
+}
+
+.btn-next-quest:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 6px 0 #1e8449, 0 12px 24px rgba(39, 174, 96, 0.5);
+}
+
+.secondary-actions-row {
+    display: flex;
+    gap: 8px;
+    width: 100%;
+}
+
+.btn-secondary-celebration {
+    flex: 1;
+    background: #fff;
+    border: 2px solid #bdc3c7;
+    border-radius: 10px;
+    padding: clamp(6px, 1.2vh, 10px);
+    font-size: clamp(0.8rem, 1.6vh, 0.95rem);
+    font-weight: 700;
+    font-family: var(--font-main);
+    color: #34495e;
+    cursor: pointer;
+    transition: all 0.15s ease;
+}
+
+.btn-secondary-celebration:hover {
+    background: #f4f6f7;
+    border-color: #7f8c8d;
+}
+
+/* Defeat Modal Styling */
+.defeat-header { margin-bottom: 8px; }
+.defeat-icon { font-size: clamp(2rem, 4.5vh, 2.8rem); display: block; }
+.defeat-title { margin: 2px 0; font-size: clamp(1.4rem, 3.2vh, 1.9rem); color: #c0392b; font-weight: 800; }
+.defeat-subtitle { color: #7f8c8d; font-size: clamp(0.8rem, 1.6vh, 0.95rem); margin: 0; }
+.defeat-encouragement {
+    font-size: clamp(0.85rem, 1.8vh, 1rem);
+    color: #2c3e50;
+    font-style: italic;
+    background: white;
+    padding: 10px 14px;
+    border-radius: 10px;
+    border: 1px dashed #e74c3c;
+    margin: 8px 0 14px 0;
+}
+
+.btn-retry-quest {
+    background: linear-gradient(180deg, #e74c3c 0%, #c0392b 100%);
+    color: white;
+    box-shadow: 0 4px 0 #922b21;
+}
+
+.btn-retry-quest:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 6px 0 #922b21;
+}
+
+/* ========================================================
+   FAIRYTALE LEVEL TRANSITION SCREEN (CLOUDS & MARCHING)
+   ======================================================== */
+.transition-screen-overlay {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100vw;
+    height: 100vh;
+    background: rgba(26, 37, 47, 0.85);
+    backdrop-filter: blur(8px);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    z-index: 10000;
+}
+
+.transition-parchment-box {
+    background: var(--color-parchment);
+    border: 4px solid var(--color-gold);
+    border-radius: 20px;
+    padding: clamp(20px, 4vh, 32px) clamp(24px, 4vw, 44px);
+    text-align: center;
+    box-shadow: 0 12px 36px rgba(0,0,0,0.5);
+    max-width: 440px;
+    width: 90%;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+}
+
+.transition-hero-marching {
+    width: clamp(80px, 16vh, 120px);
+    height: clamp(80px, 16vh, 120px);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    margin-bottom: 6px;
+    position: relative;
+}
+
+.marching-hero-img {
+    max-height: 100%;
+    max-width: 100%;
+    object-fit: contain;
+    filter: drop-shadow(0 6px 12px rgba(0,0,0,0.3));
+}
+
+.transition-title {
+    font-size: clamp(1.2rem, 2.6vh, 1.5rem);
+    color: #8b5a2b;
+    margin: 4px 0 2px 0;
+    font-weight: 800;
+}
+
+.transition-target {
+    font-size: clamp(0.9rem, 1.8vh, 1.05rem);
+    color: #2c3e50;
+    font-weight: 700;
+    margin: 2px 0 10px 0;
+}
+
+.transition-sparkles {
+    display: flex;
+    gap: 12px;
+    font-size: 1.4rem;
+}
+
+.sparkle { animation: bounce 0.6s infinite alternate; }
+.sparkle:nth-child(2) { animation-delay: 0.2s; }
+.sparkle:nth-child(3) { animation-delay: 0.4s; }
+
+/* ANIMATION KEYFRAMES */
+@keyframes victoryModalPop {
+    0% { transform: scale(0.7) translateY(20px); opacity: 0; }
+    70% { transform: scale(1.05) translateY(-4px); opacity: 1; }
+    100% { transform: scale(1) translateY(0); opacity: 1; }
+}
+
+.anim-victory-modal-pop {
+    animation: victoryModalPop 0.45s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
+}
+
+.anim-hero-victory {
+    animation: heroVictoryJump 1.2s infinite ease-in-out alternate;
+}
+
+@keyframes heroVictoryJump {
+    0% { transform: translateY(0) scale(1); }
+    50% { transform: translateY(-8px) scale(1.08) rotate(2deg); }
+    100% { transform: translateY(0) scale(1); }
+}
+
+.anim-hero-march {
+    animation: heroMarchBob 0.6s infinite ease-in-out alternate;
+}
+
+@keyframes heroMarchBob {
+    0% { transform: translateY(0) rotate(-2deg); }
+    100% { transform: translateY(-6px) rotate(2deg); }
+}
+
+.anim-fade-in {
+    animation: fadeIn 0.3s ease-out forwards;
+}
 
-/* ANIMATIONS */
 @keyframes bounce {
     from { transform: translateY(0); }
     to { transform: translateY(-4px); }
 }
 
-@keyframes pulse {
-    0% { transform: scale(1); }
-    50% { transform: scale(1.08); }
-    100% { transform: scale(1); }
-}
-
-@keyframes fadeIn {
-    from { opacity: 0; transform: translateY(-8px); }
-    to { opacity: 1; transform: translateY(0); }
-}
-
 .anim-hero-idle { animation: idleBreathe 3s infinite ease-in-out; }
 .anim-enemy-idle { animation: idleBreathe 3s infinite ease-in-out 0.5s; }
 .anim-hero-attack { animation: heroAttackDash 0.8s ease-out; }
diff --git a/src/CiselnaVyprava/wwwroot/data/worlds-grade1.json b/src/CiselnaVyprava/wwwroot/data/worlds-grade1.json
index 62684d0..5d7ac9d 100644
--- a/src/CiselnaVyprava/wwwroot/data/worlds-grade1.json
+++ b/src/CiselnaVyprava/wwwroot/data/worlds-grade1.json
@@ -2,54 +2,24 @@
   {
     "id": 1,
     "grade": 1,
-    "name": "Rozprávková lúka (Počítanie do 10)",
-    "description": "Jednoduché sčítanie a odčítanie do 10 pre malých prváčikov.",
+    "name": "Svet 1: Rozprávková lúka (Do 10)",
+    "description": "Základné sčítanie a odčítanie v obore do 10 pre prváčikov.",
     "background": "assets/images/backgrounds/world1_meadow.jpg",
     "levels": [
       {
         "id": "1-1-1",
         "levelNumber": 1,
         "name": "Lúčny Motýlik",
-        "enemy": {
-          "id": "meadow_butterfly",
-          "name": "Lúčny Motýlik",
-          "maxHp": 20,
-          "attackPower": 1,
-          "assetFolder": "assets/images/enemies/goblin"
-        },
-        "mathConfig": {
-          "operations": ["+"],
-          "minA": 1,
-          "maxA": 5,
-          "minB": 1,
-          "maxB": 5,
-          "maxSum": 10,
-          "allowCarryOver": false,
-          "inputType": "DirectInput"
-        },
+        "enemy": { "id": "meadow_butterfly", "name": "Lúčny Motýlik", "maxHp": 20, "attackPower": 1, "assetFolder": "assets/images/enemies/goblin" },
+        "mathConfig": { "operations": ["+"], "minA": 1, "maxA": 5, "minB": 1, "maxB": 5, "maxSum": 10, "allowCarryOver": false, "inputType": "DirectInput" },
         "requiredCorrectAnswers": 3
       },
       {
         "id": "1-1-2",
         "levelNumber": 2,
         "name": "Zvedavý Zajačik",
-        "enemy": {
-          "id": "curious_bunny",
-          "name": "Zvedavý Zajačik",
-          "maxHp": 25,
-          "attackPower": 1,
-          "assetFolder": "assets/images/enemies/slime"
-        },
-        "mathConfig": {
-          "operations": ["+", "-"],
-          "minA": 2,
-          "maxA": 10,
-          "minB": 1,
-          "maxB": 5,
-          "maxSum": 10,
-          "allowCarryOver": false,
-          "inputType": "DirectInput"
-        },
+        "enemy": { "id": "curious_bunny", "name": "Zvedavý Zajačik", "maxHp": 25, "attackPower": 1, "assetFolder": "assets/images/enemies/slime" },
+        "mathConfig": { "operations": ["+", "-"], "minA": 2, "maxA": 10, "minB": 1, "maxB": 5, "maxSum": 10, "allowCarryOver": false, "inputType": "DirectInput" },
         "requiredCorrectAnswers": 3
       },
       {
@@ -57,23 +27,8 @@
         "levelNumber": 3,
         "name": "Lesný Medveď (Boss)",
         "isBoss": true,
-        "enemy": {
-          "id": "gentle_bear_boss",
-          "name": "Strážca Lúky",
-          "maxHp": 40,
-          "attackPower": 1,
-          "assetFolder": "assets/images/enemies/golem"
-        },
-        "mathConfig": {
-          "operations": ["+", "-"],
-          "minA": 3,
-          "maxA": 10,
-          "minB": 1,
-          "maxB": 5,
-          "maxSum": 10,
-          "allowCarryOver": false,
-          "inputType": "DirectInput"
-        },
+        "enemy": { "id": "gentle_bear_boss", "name": "Strážca Lúky", "maxHp": 40, "attackPower": 1, "assetFolder": "assets/images/enemies/golem" },
+        "mathConfig": { "operations": ["+", "-"], "minA": 3, "maxA": 10, "minB": 1, "maxB": 5, "maxSum": 10, "allowCarryOver": false, "inputType": "DirectInput" },
         "requiredCorrectAnswers": 4
       }
     ]
@@ -81,32 +36,86 @@
   {
     "id": 2,
     "grade": 1,
-    "name": "Slnečná čistinka (Počítanie do 20 bez prechodu)",
-    "description": "Sčítanie a odčítanie v obore do 20 (napr. 10 + 4, 15 - 3).",
+    "name": "Svet 2: Slnečná čistinka (Do 20 bez prechodu)",
+    "description": "Sčítanie a odčítanie v obore do 20 bez prechodu cez desiatku.",
     "background": "assets/images/backgrounds/world2_forest.jpg",
     "levels": [
       {
         "id": "1-2-1",
         "levelNumber": 1,
         "name": "Lesný Škriatok",
-        "enemy": {
-          "id": "forest_gnome",
-          "name": "Lesný Škriatok",
-          "maxHp": 30,
-          "attackPower": 1,
-          "assetFolder": "assets/images/enemies/goblin"
-        },
-        "mathConfig": {
-          "operations": ["+", "-"],
-          "minA": 10,
-          "maxA": 19,
-          "minB": 1,
-          "maxB": 5,
-          "maxSum": 20,
-          "allowCarryOver": false,
-          "inputType": "DirectInput"
-        },
+        "enemy": { "id": "forest_gnome", "name": "Lesný Škriatok", "maxHp": 30, "attackPower": 1, "assetFolder": "assets/images/enemies/goblin" },
+        "mathConfig": { "operations": ["+", "-"], "minA": 10, "maxA": 19, "minB": 1, "maxB": 5, "maxSum": 20, "allowCarryOver": false, "inputType": "DirectInput" },
         "requiredCorrectAnswers": 4
+      },
+      {
+        "id": "1-2-2",
+        "levelNumber": 2,
+        "name": "Kráľovský Ježko",
+        "enemy": { "id": "royal_hedgehog", "name": "Kráľovský Ježko", "maxHp": 35, "attackPower": 1, "assetFolder": "assets/images/enemies/slime" },
+        "mathConfig": { "operations": ["+", "-"], "minA": 11, "maxA": 19, "minB": 1, "maxB": 8, "maxSum": 20, "allowCarryOver": false, "inputType": "DirectInput" },
+        "requiredCorrectAnswers": 4
+      }
+    ]
+  },
+  {
+    "id": 3,
+    "grade": 1,
+    "name": "Svet 3: Zrkadlové jazierko (Porovnávanie < > =)",
+    "description": "Zisťovanie, ktoré číslo je väčšie, menšie alebo rovnaké.",
+    "background": "assets/images/backgrounds/world3_river.jpg",
+    "levels": [
+      {
+        "id": "1-3-1",
+        "levelNumber": 1,
+        "name": "Vodná Víla",
+        "enemy": { "id": "water_fairy", "name": "Vodná Víla", "maxHp": 30, "attackPower": 1, "assetFolder": "assets/images/enemies/goblin" },
+        "mathConfig": { "operations": ["<", ">", "="], "minA": 1, "maxA": 20, "minB": 1, "maxB": 20, "inputType": "MultipleChoice" },
+        "requiredCorrectAnswers": 4
+      },
+      {
+        "id": "1-3-2",
+        "levelNumber": 2,
+        "name": "Riečny Had (Boss)",
+        "isBoss": true,
+        "enemy": { "id": "river_serpent_boss", "name": "Riečny Had", "maxHp": 50, "attackPower": 1, "assetFolder": "assets/images/enemies/golem" },
+        "mathConfig": { "operations": ["<", ">", "="], "minA": 5, "maxA": 20, "minB": 5, "maxB": 20, "inputType": "MultipleChoice" },
+        "requiredCorrectAnswers": 5
+      }
+    ]
+  },
+  {
+    "id": 4,
+    "grade": 1,
+    "name": "Svet 4: Horská pevnosť (Desiatky)",
+    "description": "Počítanie po desiatkach do 100 (10, 20, 30...).",
+    "background": "assets/images/backgrounds/world1_meadow.jpg",
+    "levels": [
+      {
+        "id": "1-4-1",
+        "levelNumber": 1,
+        "name": "Kamenný Strážca",
+        "enemy": { "id": "stone_watcher", "name": "Kamenný Strážca", "maxHp": 35, "attackPower": 1, "assetFolder": "assets/images/enemies/golem" },
+        "mathConfig": { "operations": ["+", "-"], "minA": 10, "maxA": 50, "minB": 10, "maxB": 40, "maxSum": 100, "allowCarryOver": false, "inputType": "DirectInput" },
+        "requiredCorrectAnswers": 4
+      }
+    ]
+  },
+  {
+    "id": 5,
+    "grade": 1,
+    "name": "Svet 5: Kráľovský Hrad (Finále 1. ročníka)",
+    "description": "Veľký záverečný test všetkých zručností prvého ročníka!",
+    "background": "assets/images/backgrounds/title_screen_bg.jpg",
+    "levels": [
+      {
+        "id": "1-5-1",
+        "levelNumber": 1,
+        "name": "Kráľovský Drak (Veľký Boss)",
+        "isBoss": true,
+        "enemy": { "id": "king_dragon_boss", "name": "Kráľovský Drak", "maxHp": 60, "attackPower": 1, "assetFolder": "assets/images/enemies/golem" },
+        "mathConfig": { "operations": ["+", "-"], "minA": 5, "maxA": 20, "minB": 1, "maxB": 10, "maxSum": 20, "allowCarryOver": false, "inputType": "DirectInput" },
+        "requiredCorrectAnswers": 6
       }
     ]
   }
diff --git a/src/CiselnaVyprava/wwwroot/data/worlds-grade2.json b/src/CiselnaVyprava/wwwroot/data/worlds-grade2.json
index 306c0ae..5cebdc1 100644
--- a/src/CiselnaVyprava/wwwroot/data/worlds-grade2.json
+++ b/src/CiselnaVyprava/wwwroot/data/worlds-grade2.json
@@ -2,7 +2,7 @@
   {
     "id": 1,
     "grade": 2,
-    "name": "Lúka sčítania a odčítania",
+    "name": "Svet 1: Lúka sčítania a odčítania (Do 20 s prechodom)",
     "description": "Základné sčítanie a odčítanie do 20 s prechodom cez desiatku.",
     "background": "assets/images/backgrounds/world1_meadow.jpg",
     "levels": [
@@ -19,10 +19,10 @@
         },
         "mathConfig": {
           "operations": ["+"],
-          "minA": 1,
-          "maxA": 10,
-          "minB": 1,
-          "maxB": 10,
+          "minA": 2,
+          "maxA": 9,
+          "minB": 2,
+          "maxB": 9,
           "maxSum": 20,
           "allowCarryOver": true,
           "inputType": "DirectInput"
@@ -43,9 +43,9 @@
         "mathConfig": {
           "operations": ["+", "-"],
           "minA": 5,
-          "maxA": 20,
-          "minB": 1,
-          "maxB": 10,
+          "maxA": 18,
+          "minB": 2,
+          "maxB": 9,
           "maxSum": 20,
           "allowCarryOver": true,
           "inputType": "DirectInput"
@@ -55,21 +55,21 @@
       {
         "id": "2-1-3",
         "levelNumber": 3,
-        "name": "Kamenný Golem (Boss)",
+        "name": "Golem Čísel (Boss)",
         "isBoss": true,
         "enemy": {
           "id": "stone_golem_boss",
-          "name": "Golem Čísiel",
+          "name": "Golem Čísel",
           "maxHp": 60,
           "attackPower": 1,
           "assetFolder": "assets/images/enemies/golem"
         },
         "mathConfig": {
           "operations": ["+", "-"],
-          "minA": 8,
+          "minA": 6,
           "maxA": 20,
-          "minB": 4,
-          "maxB": 10,
+          "minB": 3,
+          "maxB": 9,
           "maxSum": 20,
           "allowCarryOver": true,
           "inputType": "DirectInput"
@@ -81,20 +81,63 @@
   {
     "id": 2,
     "grade": 2,
-    "name": "Les porovnávania a rovností",
-    "description": "Porovnávanie čísel pomocou znakov <, >, = a dopĺňanie do desiatky.",
+    "name": "Svet 2: Les porovnávania (Do 100)",
+    "description": "Porovnávanie čísel pomocou znakov <, >, = v obore do 100.",
     "background": "assets/images/backgrounds/world2_forest.jpg",
     "levels": [
       {
         "id": "2-2-1",
         "levelNumber": 1,
-        "name": "Múdra Sova",
+        "name": "Lesný Goblin",
         "enemy": {
-          "id": "wise_owl",
-          "name": "Múdra Sova",
-          "maxHp": 30,
+          "id": "forest_goblin_comp",
+          "name": "Lesný Goblin",
+          "maxHp": 35,
           "attackPower": 1,
-          "assetFolder": "assets/images/enemies/owl"
+          "assetFolder": "assets/images/enemies/goblin"
+        },
+        "mathConfig": {
+          "operations": ["<", ">", "="],
+          "minA": 1,
+          "maxA": 50,
+          "minB": 1,
+          "maxB": 50,
+          "inputType": "MultipleChoice"
+        },
+        "requiredCorrectAnswers": 4
+      },
+      {
+        "id": "2-2-2",
+        "levelNumber": 2,
+        "name": "Slizký Strážca",
+        "enemy": {
+          "id": "slime_comp_watcher",
+          "name": "Slizký Strážca",
+          "maxHp": 40,
+          "attackPower": 1,
+          "assetFolder": "assets/images/enemies/slime"
+        },
+        "mathConfig": {
+          "operations": ["<", ">", "="],
+          "minA": 20,
+          "maxA": 100,
+          "minB": 20,
+          "maxB": 100,
+          "inputType": "MultipleChoice"
+        },
+        "requiredCorrectAnswers": 4
+      },
+      {
+        "id": "2-2-3",
+        "levelNumber": 3,
+        "name": "Strážca Hvozdu (Boss)",
+        "isBoss": true,
+        "enemy": {
+          "id": "forest_golem_comp_boss",
+          "name": "Strážca Hvozdu",
+          "maxHp": 55,
+          "attackPower": 1,
+          "assetFolder": "assets/images/enemies/golem"
         },
         "mathConfig": {
           "operations": ["<", ">", "="],
@@ -104,7 +147,235 @@
           "maxB": 100,
           "inputType": "MultipleChoice"
         },
+        "requiredCorrectAnswers": 5
+      }
+    ]
+  },
+  {
+    "id": 3,
+    "grade": 2,
+    "name": "Svet 3: Riečna zátoka (Do 100 bez prechodu)",
+    "description": "Sčítanie a odčítanie desiatok a dvojciferných čísel bez prechodu.",
+    "background": "assets/images/backgrounds/world3_river.jpg",
+    "levels": [
+      {
+        "id": "2-3-1",
+        "levelNumber": 1,
+        "name": "Riečny Goblin",
+        "enemy": {
+          "id": "river_goblin_easy",
+          "name": "Riečny Goblin",
+          "maxHp": 35,
+          "attackPower": 1,
+          "assetFolder": "assets/images/enemies/goblin"
+        },
+        "mathConfig": {
+          "operations": ["+", "-"],
+          "minA": 10,
+          "maxA": 80,
+          "minB": 1,
+          "maxB": 9,
+          "maxSum": 100,
+          "allowCarryOver": false,
+          "inputType": "DirectInput"
+        },
         "requiredCorrectAnswers": 4
+      },
+      {
+        "id": "2-3-2",
+        "levelNumber": 2,
+        "name": "Kvapkový Sliz",
+        "enemy": {
+          "id": "droplet_slime",
+          "name": "Kvapkový Sliz",
+          "maxHp": 45,
+          "attackPower": 1,
+          "assetFolder": "assets/images/enemies/slime"
+        },
+        "mathConfig": {
+          "operations": ["+", "-"],
+          "minA": 20,
+          "maxA": 70,
+          "minB": 10,
+          "maxB": 25,
+          "maxSum": 100,
+          "allowCarryOver": false,
+          "inputType": "DirectInput"
+        },
+        "requiredCorrectAnswers": 4
+      },
+      {
+        "id": "2-3-3",
+        "levelNumber": 3,
+        "name": "Balvanový Netvor (Boss)",
+        "isBoss": true,
+        "enemy": {
+          "id": "river_golem_boss",
+          "name": "Balvanový Netvor",
+          "maxHp": 65,
+          "attackPower": 1,
+          "assetFolder": "assets/images/enemies/golem"
+        },
+        "mathConfig": {
+          "operations": ["+", "-"],
+          "minA": 20,
+          "maxA": 90,
+          "minB": 5,
+          "maxB": 30,
+          "maxSum": 100,
+          "allowCarryOver": false,
+          "inputType": "DirectInput"
+        },
+        "requiredCorrectAnswers": 5
+      }
+    ]
+  },
+  {
+    "id": 4,
+    "grade": 2,
+    "name": "Svet 4: Horský priesmyk (Do 100 s prechodom)",
+    "description": "Sčítanie a odčítanie s prechodom cez desiatku v obore do 100.",
+    "background": "assets/images/backgrounds/world1_meadow.jpg",
+    "levels": [
+      {
+        "id": "2-4-1",
+        "levelNumber": 1,
+        "name": "Horský Goblin",
+        "enemy": {
+          "id": "mountain_goblin",
+          "name": "Horský Goblin",
+          "maxHp": 40,
+          "attackPower": 1,
+          "assetFolder": "assets/images/enemies/goblin"
+        },
+        "mathConfig": {
+          "operations": ["+", "-"],
+          "minA": 15,
+          "maxA": 75,
+          "minB": 4,
+          "maxB": 9,
+          "maxSum": 100,
+          "allowCarryOver": true,
+          "inputType": "DirectInput"
+        },
+        "requiredCorrectAnswers": 4
+      },
+      {
+        "id": "2-4-2",
+        "levelNumber": 2,
+        "name": "Magický Horský Sliz",
+        "enemy": {
+          "id": "mountain_magic_slime",
+          "name": "Magický Horský Sliz",
+          "maxHp": 50,
+          "attackPower": 1,
+          "assetFolder": "assets/images/enemies/slime"
+        },
+        "mathConfig": {
+          "operations": ["+", "-"],
+          "minA": 20,
+          "maxA": 85,
+          "minB": 6,
+          "maxB": 15,
+          "maxSum": 100,
+          "allowCarryOver": true,
+          "inputType": "DirectInput"
+        },
+        "requiredCorrectAnswers": 5
+      },
+      {
+        "id": "2-4-3",
+        "levelNumber": 3,
+        "name": "Horský Obor (Boss)",
+        "isBoss": true,
+        "enemy": {
+          "id": "mountain_giant_boss",
+          "name": "Horský Obor",
+          "maxHp": 70,
+          "attackPower": 1,
+          "assetFolder": "assets/images/enemies/golem"
+        },
+        "mathConfig": {
+          "operations": ["+", "-"],
+          "minA": 25,
+          "maxA": 90,
+          "minB": 8,
+          "maxB": 25,
+          "maxSum": 100,
+          "allowCarryOver": true,
+          "inputType": "DirectInput"
+        },
+        "requiredCorrectAnswers": 5
+      }
+    ]
+  },
+  {
+    "id": 5,
+    "grade": 2,
+    "name": "Svet 5: Hrad malej násobilky (Úvod do násobenia)",
+    "description": "Základy násobenia číslami 2, 3, 5 a 10.",
+    "background": "assets/images/backgrounds/title_screen_bg.jpg",
+    "levels": [
+      {
+        "id": "2-5-1",
+        "levelNumber": 1,
+        "name": "Hradný Strážca",
+        "enemy": {
+          "id": "castle_guard_goblin",
+          "name": "Hradný Strážca",
+          "maxHp": 40,
+          "attackPower": 1,
+          "assetFolder": "assets/images/enemies/goblin"
+        },
+        "mathConfig": {
+          "operations": ["*"],
+          "factors": [2, 5],
+          "minMultiplier": 1,
+          "maxMultiplier": 10,
+          "inputType": "DirectInput"
+        },
+        "requiredCorrectAnswers": 4
+      },
+      {
+        "id": "2-5-2",
+        "levelNumber": 2,
+        "name": "Kráľovský Sliz",
+        "enemy": {
+          "id": "royal_castle_slime",
+          "name": "Kráľovský Sliz",
+          "maxHp": 50,
+          "attackPower": 1,
+          "assetFolder": "assets/images/enemies/slime"
+        },
+        "mathConfig": {
+          "operations": ["*"],
+          "factors": [2, 3, 5, 10],
+          "minMultiplier": 1,
+          "maxMultiplier": 10,
+          "inputType": "DirectInput"
+        },
+        "requiredCorrectAnswers": 5
+      },
+      {
+        "id": "2-5-3",
+        "levelNumber": 3,
+        "name": "Veľký Hradný Pán (Finále 2. ročníka)",
+        "isBoss": true,
+        "enemy": {
+          "id": "castle_lord_boss",
+          "name": "Veľký Hradný Pán",
+          "maxHp": 75,
+          "attackPower": 1,
+          "assetFolder": "assets/images/enemies/golem"
+        },
+        "mathConfig": {
+          "operations": ["*"],
+          "factors": [2, 3, 5, 10],
+          "minMultiplier": 1,
+          "maxMultiplier": 10,
+          "inputType": "DirectInput"
+        },
+        "requiredCorrectAnswers": 6
       }
     ]
   }
diff --git a/src/CiselnaVyprava/wwwroot/data/worlds-grade3.json b/src/CiselnaVyprava/wwwroot/data/worlds-grade3.json
index 23b572e..96bf14f 100644
--- a/src/CiselnaVyprava/wwwroot/data/worlds-grade3.json
+++ b/src/CiselnaVyprava/wwwroot/data/worlds-grade3.json
@@ -2,8 +2,8 @@
   {
     "id": 1,
     "grade": 3,
-    "name": "Rieka malej násobilky (2, 3, 4, 5)",
-    "description": "Základy násobenia a delenia číslami 2, 3, 4, 5.",
+    "name": "Svet 1: Rieka malej násobilky (2, 3, 4, 5)",
+    "description": "Základy násobenia a delenia číslami 2, 3, 4 a 5.",
     "background": "assets/images/backgrounds/world3_river.jpg",
     "levels": [
       {
@@ -11,11 +11,11 @@
         "levelNumber": 1,
         "name": "Riečny Škriatok",
         "enemy": {
-          "id": "river_sprite",
+          "id": "river_sprite_goblin",
           "name": "Riečny Škriatok",
-          "maxHp": 30,
+          "maxHp": 35,
           "attackPower": 1,
-          "assetFolder": "assets/images/enemies/sprite"
+          "assetFolder": "assets/images/enemies/goblin"
         },
         "mathConfig": {
           "operations": ["*"],
@@ -29,13 +29,34 @@
       {
         "id": "3-1-2",
         "levelNumber": 2,
-        "name": "Vodník Násobka",
+        "name": "Vodný Slizík",
         "enemy": {
-          "id": "water_demon",
-          "name": "Vodník Násobka",
-          "maxHp": 40,
+          "id": "water_slime_div",
+          "name": "Vodný Slizík",
+          "maxHp": 45,
           "attackPower": 1,
-          "assetFolder": "assets/images/enemies/water_demon"
+          "assetFolder": "assets/images/enemies/slime"
+        },
+        "mathConfig": {
+          "operations": ["/"],
+          "factors": [2, 3, 4, 5],
+          "minMultiplier": 1,
+          "maxMultiplier": 10,
+          "inputType": "DirectInput"
+        },
+        "requiredCorrectAnswers": 4
+      },
+      {
+        "id": "3-1-3",
+        "levelNumber": 3,
+        "name": "Jazerný Strážca (Boss)",
+        "isBoss": true,
+        "enemy": {
+          "id": "lake_golem_boss",
+          "name": "Jazerný Strážca",
+          "maxHp": 65,
+          "attackPower": 1,
+          "assetFolder": "assets/images/enemies/golem"
         },
         "mathConfig": {
           "operations": ["*", "/"],
@@ -45,22 +66,71 @@
           "inputType": "DirectInput"
         },
         "requiredCorrectAnswers": 5
+      }
+    ]
+  },
+  {
+    "id": 2,
+    "grade": 3,
+    "name": "Svet 2: Les veľkej násobilky (6, 7, 8, 9, 10)",
+    "description": "Násobenie a delenie vyššími číslami 6 až 10.",
+    "background": "assets/images/backgrounds/world2_forest.jpg",
+    "levels": [
+      {
+        "id": "3-2-1",
+        "levelNumber": 1,
+        "name": "Lesný Piadimužík",
+        "enemy": {
+          "id": "forest_dwarf_goblin",
+          "name": "Lesný Piadimužík",
+          "maxHp": 40,
+          "attackPower": 1,
+          "assetFolder": "assets/images/enemies/goblin"
+        },
+        "mathConfig": {
+          "operations": ["*"],
+          "factors": [6, 7, 8, 9, 10],
+          "minMultiplier": 1,
+          "maxMultiplier": 10,
+          "inputType": "DirectInput"
+        },
+        "requiredCorrectAnswers": 4
       },
       {
-        "id": "3-1-3",
+        "id": "3-2-2",
+        "levelNumber": 2,
+        "name": "Živicový Sliz",
+        "enemy": {
+          "id": "resin_slime_div",
+          "name": "Živicový Sliz",
+          "maxHp": 50,
+          "attackPower": 1,
+          "assetFolder": "assets/images/enemies/slime"
+        },
+        "mathConfig": {
+          "operations": ["/"],
+          "factors": [6, 7, 8, 9, 10],
+          "minMultiplier": 1,
+          "maxMultiplier": 10,
+          "inputType": "DirectInput"
+        },
+        "requiredCorrectAnswers": 5
+      },
+      {
+        "id": "3-2-3",
         "levelNumber": 3,
-        "name": "Jazerný Drak (Boss)",
+        "name": "Starý Lesný Golem (Boss)",
         "isBoss": true,
         "enemy": {
-          "id": "lake_dragon_boss",
-          "name": "Jazerný Drak",
-          "maxHp": 60,
+          "id": "ancient_forest_golem_boss",
+          "name": "Starý Lesný Golem",
+          "maxHp": 70,
           "attackPower": 1,
-          "assetFolder": "assets/images/enemies/dragon"
+          "assetFolder": "assets/images/enemies/golem"
         },
         "mathConfig": {
           "operations": ["*", "/"],
-          "factors": [2, 3, 4, 5],
+          "factors": [6, 7, 8, 9, 10],
           "minMultiplier": 1,
           "maxMultiplier": 10,
           "inputType": "DirectInput"
@@ -68,5 +138,237 @@
         "requiredCorrectAnswers": 6
       }
     ]
+  },
+  {
+    "id": 3,
+    "grade": 3,
+    "name": "Svet 3: Krištáľové údolie (Počítanie do 1000)",
+    "description": "Sčítanie a odčítanie v obore do 1000 po stovkách a desiatkach.",
+    "background": "assets/images/backgrounds/world1_meadow.jpg",
+    "levels": [
+      {
+        "id": "3-3-1",
+        "levelNumber": 1,
+        "name": "Jaskynný Goblin",
+        "enemy": {
+          "id": "cave_goblin_1000",
+          "name": "Jaskynný Goblin",
+          "maxHp": 45,
+          "attackPower": 1,
+          "assetFolder": "assets/images/enemies/goblin"
+        },
+        "mathConfig": {
+          "operations": ["+", "-"],
+          "minA": 100,
+          "maxA": 800,
+          "minB": 50,
+          "maxB": 200,
+          "maxSum": 1000,
+          "allowCarryOver": false,
+          "inputType": "DirectInput"
+        },
+        "requiredCorrectAnswers": 4
+      },
+      {
+        "id": "3-3-2",
+        "levelNumber": 2,
+        "name": "Trblietavý Sliz",
+        "enemy": {
+          "id": "glitter_slime_1000",
+          "name": "Trblietavý Sliz",
+          "maxHp": 55,
+          "attackPower": 1,
+          "assetFolder": "assets/images/enemies/slime"
+        },
+        "mathConfig": {
+          "operations": ["+", "-"],
+          "minA": 200,
+          "maxA": 900,
+          "minB": 100,
+          "maxB": 300,
+          "maxSum": 1000,
+          "allowCarryOver": true,
+          "inputType": "DirectInput"
+        },
+        "requiredCorrectAnswers": 5
+      },
+      {
+        "id": "3-3-3",
+        "levelNumber": 3,
+        "name": "Kryštálový Golem (Boss)",
+        "isBoss": true,
+        "enemy": {
+          "id": "crystal_golem_boss",
+          "name": "Kryštálový Golem",
+          "maxHp": 75,
+          "attackPower": 1,
+          "assetFolder": "assets/images/enemies/golem"
+        },
+        "mathConfig": {
+          "operations": ["+", "-"],
+          "minA": 150,
+          "maxA": 850,
+          "minB": 50,
+          "maxB": 350,
+          "maxSum": 1000,
+          "allowCarryOver": true,
+          "inputType": "DirectInput"
+        },
+        "requiredCorrectAnswers": 6
+      }
+    ]
+  },
+  {
+    "id": 4,
+    "grade": 3,
+    "name": "Svet 4: Veterné bralo (Porovnávanie do 1000)",
+    "description": "Porovnávanie veľkých trojciferných čísel pomocou znakov <, >, =.",
+    "background": "assets/images/backgrounds/world3_river.jpg",
+    "levels": [
+      {
+        "id": "3-4-1",
+        "levelNumber": 1,
+        "name": "Veterný Škriatok",
+        "enemy": {
+          "id": "wind_sprite_goblin",
+          "name": "Veterný Škriatok",
+          "maxHp": 40,
+          "attackPower": 1,
+          "assetFolder": "assets/images/enemies/goblin"
+        },
+        "mathConfig": {
+          "operations": ["<", ">", "="],
+          "minA": 100,
+          "maxA": 999,
+          "minB": 100,
+          "maxB": 999,
+          "inputType": "MultipleChoice"
+        },
+        "requiredCorrectAnswers": 4
+      },
+      {
+        "id": "3-4-2",
+        "levelNumber": 2,
+        "name": "Búrkový Sliz",
+        "enemy": {
+          "id": "storm_slime_comp",
+          "name": "Búrkový Sliz",
+          "maxHp": 50,
+          "attackPower": 1,
+          "assetFolder": "assets/images/enemies/slime"
+        },
+        "mathConfig": {
+          "operations": ["<", ">", "="],
+          "minA": 300,
+          "maxA": 1000,
+          "minB": 300,
+          "maxB": 1000,
+          "inputType": "MultipleChoice"
+        },
+        "requiredCorrectAnswers": 5
+      },
+      {
+        "id": "3-4-3",
+        "levelNumber": 3,
+        "name": "Hromový Golem (Boss)",
+        "isBoss": true,
+        "enemy": {
+          "id": "thunder_golem_boss",
+          "name": "Hromový Golem",
+          "maxHp": 75,
+          "attackPower": 1,
+          "assetFolder": "assets/images/enemies/golem"
+        },
+        "mathConfig": {
+          "operations": ["<", ">", "="],
+          "minA": 100,
+          "maxA": 1000,
+          "minB": 100,
+          "maxB": 1000,
+          "inputType": "MultipleChoice"
+        },
+        "requiredCorrectAnswers": 6
+      }
+    ]
+  },
+  {
+    "id": 5,
+    "grade": 3,
+    "name": "Svet 5: Kráľovská citadela (Veľké finále)",
+    "description": "Záverečná výzva tretieho ročníka – mix násobilky, delenia a veľkých čísel!",
+    "background": "assets/images/backgrounds/title_screen_bg.jpg",
+    "levels": [
+      {
+        "id": "3-5-1",
+        "levelNumber": 1,
+        "name": "Elitný Goblin",
+        "enemy": {
+          "id": "elite_guard_goblin",
+          "name": "Elitný Goblin",
+          "maxHp": 50,
+          "attackPower": 1,
+          "assetFolder": "assets/images/enemies/goblin"
+        },
+        "mathConfig": {
+          "operations": ["*", "/"],
+          "factors": [2, 3, 4, 5, 6, 7, 8, 9, 10],
+          "minMultiplier": 1,
+          "maxMultiplier": 10,
+          "inputType": "DirectInput"
+        },
+        "requiredCorrectAnswers": 5
+      },
+      {
+        "id": "3-5-2",
+        "levelNumber": 2,
+        "name": "Magický Plazmový Sliz",
+        "enemy": {
+          "id": "plasma_slime_boss",
+          "name": "Magický Plazmový Sliz",
+          "maxHp": 65,
+          "attackPower": 1,
+          "assetFolder": "assets/images/enemies/slime"
+        },
+        "mathConfig": {
+          "operations": ["+", "-", "*", "/"],
+          "minA": 10,
+          "maxA": 100,
+          "minB": 5,
+          "maxB": 50,
+          "maxSum": 200,
+          "factors": [2, 3, 4, 5, 6, 7, 8, 9, 10],
+          "minMultiplier": 1,
+          "maxMultiplier": 10,
+          "inputType": "DirectInput"
+        },
+        "requiredCorrectAnswers": 6
+      },
+      {
+        "id": "3-5-3",
+        "levelNumber": 3,
+        "name": "Arcimág Čísel (Záverečný Boss)",
+        "isBoss": true,
+        "enemy": {
+          "id": "archmage_golem_final_boss",
+          "name": "Arcimág Čísel",
+          "maxHp": 85,
+          "attackPower": 1,
+          "assetFolder": "assets/images/enemies/golem"
+        },
+        "mathConfig": {
+          "operations": ["+", "-", "*", "/"],
+          "minA": 10,
+          "maxA": 500,
+          "minB": 10,
+          "maxB": 200,
+          "maxSum": 1000,
+          "factors": [2, 3, 4, 5, 6, 7, 8, 9, 10],
+          "minMultiplier": 1,
+          "maxMultiplier": 10,
+          "inputType": "DirectInput"
+        },
+        "requiredCorrectAnswers": 8
+      }
+    ]
   }
 ]
diff --git a/src/CiselnaVyprava/wwwroot/index.html b/src/CiselnaVyprava/wwwroot/index.html
index d17b325..6894b43 100644
--- a/src/CiselnaVyprava/wwwroot/index.html
+++ b/src/CiselnaVyprava/wwwroot/index.html
@@ -13,8 +13,6 @@
     <link rel="icon" type="image/png" href="favicon.png" />
     <link rel="preload" id="webassembly" />
     <link rel="stylesheet" href="css/app.css" />
-    <link href="CiselnaVyprava.styles.css" rel="stylesheet" />
-
 
     <script type="importmap"></script>
 </head>
@@ -38,8 +36,9 @@
         <a href="." class="reload">Obnoviť hru</a>
         <span class="dismiss">🗙</span>
     </div>
-    <script src="_framework/blazor.webassembly.js"></script>
+    <script src="_framework/blazor.webassembly#[.{fingerprint}].js"></script>
 </body>
 
 
+
 </html>
diff --git a/src/CiselnaVyprava/wwwroot/web.config b/src/CiselnaVyprava/wwwroot/web.config
index b9cf00e..43774da 100644
--- a/src/CiselnaVyprava/wwwroot/web.config
+++ b/src/CiselnaVyprava/wwwroot/web.config
@@ -59,21 +59,15 @@
       <mimeMap fileExtension=".wav" mimeType="audio/wav" />
     </staticContent>
 
-    <!-- URL Rewrite for Single Page Application (SPA routing) -->
+    <!-- SPA URL Rewrite -->
     <rewrite>
       <rules>
-        <rule name="Direct-File-Access" stopProcessing="true">
-          <match url=".*" />
-          <conditions logicalGrouping="MatchAll">
-            <add input="{REQUEST_FILENAME}" matchType="IsFile" />
-          </conditions>
-          <action type="None" />
-        </rule>
         <rule name="SPA-Routing-Fallback" stopProcessing="true">
           <match url=".*" />
           <conditions logicalGrouping="MatchAll">
             <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
             <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
+            <add input="{REQUEST_URI}" pattern="^/(_framework|assets|css|data)/" negate="true" />
           </conditions>
           <action type="Rewrite" url="/" />
         </rule>