From ce2b8bb91ce5e5a29e356b38b20a1dd2d7ae9410 Mon Sep 17 00:00:00 2001
From: Michal Vrba <m.vrba@retailsoft.sk>
Date: Mon, 21 Sep 2026 18:04:30 +0200
Subject: [PATCH] updates

---
 .../Components/CharacterSelect.razor          | 117 ++-
 src/CiselnaVyprava/wwwroot/css/app.css        | 948 +++++++-----------
 src/CiselnaVyprava/wwwroot/favicon.ico        |  35 +
 src/CiselnaVyprava/wwwroot/favicon.png        |  35 +
 src/CiselnaVyprava/wwwroot/favicon.svg        |  35 +
 src/CiselnaVyprava/wwwroot/index.html         |   3 +
 src/CiselnaVyprava/wwwroot/web.config         |  89 ++
 7 files changed, 636 insertions(+), 626 deletions(-)
 create mode 100644 src/CiselnaVyprava/wwwroot/favicon.ico
 create mode 100644 src/CiselnaVyprava/wwwroot/favicon.png
 create mode 100644 src/CiselnaVyprava/wwwroot/favicon.svg
 create mode 100644 src/CiselnaVyprava/wwwroot/web.config

diff --git a/src/CiselnaVyprava/Components/CharacterSelect.razor b/src/CiselnaVyprava/Components/CharacterSelect.razor
index 0ce0526..eac5593 100644
--- a/src/CiselnaVyprava/Components/CharacterSelect.razor
+++ b/src/CiselnaVyprava/Components/CharacterSelect.razor
@@ -2,76 +2,71 @@
 @inject ILocalStorageService Storage
 
 <div class="character-select-screen">
-    <div class="parchment-container">
-        <h1 class="game-main-title">🏰 ČÍSELNÁ VÝPRAVA</h1>
-        <p class="subtitle">Záchrana Číselného Kráľovstva</p>
-
-        <!-- KROK 1: VÝBER ROČNÍKA -->
-        <div class="selection-section">
-            <h2 class="step-title">1. Krok: Vyber si svoj ročník</h2>
-            <div class="grade-toggle-group grade-grid-3">
-                <button class="grade-btn @(SelectedGrade == 1 ? "active" : "")" @onclick="() => SetGrade(1)">
-                    <span class="grade-badge">🎒 1. ROČNÍK</span>
-                    <span class="grade-desc">Počítanie a sčítanie 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">Sčítanie a odčítanie 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">Malá násobilka a delenie</span>
-                </button>
-            </div>
-
+    <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>
 
-        <!-- KROK 2: VÝBER HRDINU -->
-        <div class="selection-section">
-            <h2 class="step-title">2. Krok: Vyber si svojho hrdinu</h2>
-            <div class="heroes-grid">
-                @foreach (var hero in DataLoader.Heroes)
-                {
-                    <div class="hero-card @(SelectedHeroId == hero.Id ? "selected-card" : "")" 
-                         @onclick="() => SelectHero(hero.Id)">
-                        <div class="hero-avatar">
-                            @if (hero.Id == "knight")
-                            {
-                                <span>⚔️</span>
-                            }
-                            else if (hero.Id == "mage")
-                            {
-                                <span>🧙‍♂️</span>
-                            }
-                            else
-                            {
-                                <span>🏹</span>
-                            }
-                        </div>
-                        <h3 class="hero-name">@hero.Name</h3>
-                        <span class="hero-title">@hero.Title</span>
-                        <p class="hero-description">@hero.Description</p>
-                        <div class="hero-skill">
-                            ✨ Špeciál: <strong>@hero.SpecialAttackName</strong>
-                        </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>
-                }
-            </div>
-        </div>
+                </div>
 
-        <!-- KROK 3: MENO HRDINU & ŠTART -->
-        <div class="selection-section name-input-section">
-            <h2 class="step-title">3. Krok: Tvoje hrdinské meno</h2>
-            <div class="name-field-row">
-                <input type="text" class="hero-name-input" @bind="HeroName" placeholder="Zadaj svoje meno..." maxlength="20" />
-                <button class="btn-start-quest" @onclick="StartQuest">
-                    Vstúpiť do kráľovstva 🚀
-                </button>
+                <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>
+                </div>
+            </div>
+
+            <!-- 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)
+                        {
+                            <div class="hero-card @(SelectedHeroId == hero.Id ? "selected-card" : "")" 
+                                 @onclick="() => SelectHero(hero.Id)">
+                                <div class="hero-avatar">
+                                    @(hero.Id == "knight" ? "⚔️" : hero.Id == "mage" ? "🧙‍♂️" : "🏹")
+                                </div>
+                                <h3 class="hero-name">@hero.Name</h3>
+                                <span class="hero-title">@hero.Title</span>
+                                <div class="hero-skill">
+                                    ✨ @hero.SpecialAttackName
+                                </div>
+                            </div>
+                        }
+                    </div>
+                </div>
             </div>
         </div>
     </div>
 </div>
 
+
 @code {
     [Parameter] public EventCallback<PlayerProfile> OnProfileReady { get; set; }
 
diff --git a/src/CiselnaVyprava/wwwroot/css/app.css b/src/CiselnaVyprava/wwwroot/css/app.css
index e947d87..7496b0c 100644
--- a/src/CiselnaVyprava/wwwroot/css/app.css
+++ b/src/CiselnaVyprava/wwwroot/css/app.css
@@ -15,249 +15,357 @@
     user-select: none;
 }
 
-body, html {
+html, body {
     margin: 0;
     padding: 0;
+    width: 100vw;
+    height: 100vh;
+    max-height: 100dvh;
+    overflow: hidden !important;
     font-family: var(--font-main);
     background: #2c3e50;
     background: radial-gradient(circle, #34495e 0%, #1a252f 100%);
     color: #2c3e50;
-    height: 100%;
-    overflow-x: hidden;
 }
 
-.game-viewport {
-    max-width: 1024px;
-    margin: 0 auto;
-    min-height: 100vh;
-    display: flex;
-    flex-direction: column;
-    padding: 16px;
-}
-
-/* ========================================================
-   CHARACTER SELECT SCREEN
-   ======================================================== */
-.character-select-screen {
+#app {
+    width: 100vw;
+    height: 100vh;
+    max-height: 100dvh;
+    overflow: hidden;
     display: flex;
     justify-content: center;
     align-items: center;
-    min-height: 90vh;
 }
 
-.parchment-container {
+.game-viewport {
+    width: 100%;
+    max-width: 1024px;
+    height: 100vh;
+    max-height: 100dvh;
+    margin: 0 auto;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    padding: clamp(6px, 1.5vh, 14px);
+    box-sizing: border-box;
+    overflow: hidden;
+}
+
+.viewport-fullscreen {
+    max-width: 100% !important;
+    padding: 0 !important;
+    margin: 0 !important;
+}
+
+/* ========================================================
+   PC GAME MAIN MENU SCREEN (100% VIEWPORT FIT)
+   ======================================================== */
+.main-menu-fullscreen {
+    height: 100vh;
+    max-height: 100dvh;
+    width: 100vw;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    position: relative;
+    overflow: hidden;
+}
+
+.main-menu-overlay {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: space-between;
+    height: 100%;
+    max-height: 100dvh;
+    padding: clamp(14px, 3vh, 32px) 20px;
+    z-index: 2;
+    box-sizing: border-box;
+}
+
+.title-logo-box {
+    text-align: center;
+    animation: fadeIn 0.8s ease-out;
+}
+
+.title-crown {
+    font-size: clamp(2rem, 5vh, 3.2rem);
+    filter: drop-shadow(0 4px 10px rgba(0,0,0,0.4));
+    animation: bounce 1.5s infinite alternate;
+}
+
+.main-game-title {
+    font-size: clamp(2rem, 5.5vh, 3.4rem);
+    font-weight: 900;
+    color: #fff;
+    text-shadow: 
+        3px 3px 0px #8b5a2b,
+        -3px -3px 0px #8b5a2b,
+        3px -3px 0px #8b5a2b,
+        -3px 3px 0px #8b5a2b,
+        0 8px 16px rgba(0,0,0,0.6);
+    margin: 0;
+    letter-spacing: 2px;
+}
+
+.title-banner {
+    display: inline-block;
+    background: linear-gradient(135deg, #f39c12, #d68910);
+    color: white;
+    font-size: clamp(0.9rem, 2vh, 1.2rem);
+    font-weight: 700;
+    padding: 4px 22px;
+    border-radius: 20px;
+    border: 3px solid #fff;
+    box-shadow: 0 6px 14px rgba(0,0,0,0.3);
+    margin-top: 4px;
+}
+
+.menu-actions-parchment {
+    background: rgba(252, 246, 232, 0.95);
+    border: 4px solid var(--color-parchment-border);
+    border-radius: 20px;
+    padding: clamp(16px, 3vh, 28px) clamp(18px, 4vw, 36px);
+    display: flex;
+    flex-direction: column;
+    gap: clamp(8px, 1.5vh, 14px);
+    width: 100%;
+    max-width: 440px;
+    box-shadow: 0 12px 32px rgba(0,0,0,0.4);
+    backdrop-filter: blur(4px);
+}
+
+.pc-menu-btn {
+    background: #fff;
+    border: 3px solid #bdc3c7;
+    border-radius: 14px;
+    padding: clamp(8px, 1.8vh, 14px) 16px;
+    display: flex;
+    align-items: center;
+    gap: 14px;
+    cursor: pointer;
+    font-family: var(--font-main);
+    transition: all 0.2s ease;
+    text-align: left;
+    box-shadow: 0 4px 0 #bdc3c7;
+}
+
+.pc-menu-btn:hover {
+    transform: translateY(-2px) scale(1.02);
+    border-color: var(--color-gold);
+}
+
+.pc-menu-btn.new-game-btn { background: #e8f8f5; border-color: #27ae60; box-shadow: 0 4px 0 #1e8449; }
+.pc-menu-btn.continue-btn { background: #fef9e7; border-color: var(--color-gold); box-shadow: 0 4px 0 var(--color-gold-dark); }
+.pc-menu-btn.reset-btn { background: transparent; border: 2px dashed #e74c3c; color: #c0392b; box-shadow: none; padding: 6px 12px; justify-content: center; }
+
+.btn-icon { font-size: clamp(1.4rem, 3.5vh, 2rem); }
+.btn-title { font-size: clamp(1.1rem, 2.5vh, 1.3rem); font-weight: 800; color: #2c3e50; }
+.btn-subtitle { font-size: clamp(0.75rem, 1.6vh, 0.85rem); color: #7f8c8d; }
+.btn-title-small { font-size: 0.85rem; font-weight: 700; }
+
+.main-menu-footer {
+    color: white;
+    font-weight: 600;
+    font-size: clamp(0.75rem, 1.6vh, 0.95rem);
+    background: rgba(0, 0, 0, 0.4);
+    padding: 4px 14px;
+    border-radius: 10px;
+}
+
+/* ========================================================
+   CHARACTER SELECT (100% VIEWPORT COMPACT 2-COLUMN)
+   ======================================================== */
+.character-select-screen {
+    height: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    overflow: hidden;
+}
+
+.select-card-compact {
     background: var(--color-parchment);
     border: 4px solid var(--color-parchment-border);
     border-radius: 20px;
     box-shadow: var(--shadow-storybook);
-    padding: 32px;
+    padding: clamp(12px, 2vh, 22px);
     width: 100%;
-    max-width: 860px;
-    text-align: center;
+    max-width: 900px;
+    max-height: 96vh;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
 }
 
-.game-main-title {
-    font-size: 2.6rem;
+.select-header {
+    text-align: center;
+    margin-bottom: clamp(6px, 1.2vh, 12px);
+}
+
+.select-header .game-main-title {
+    font-size: clamp(1.6rem, 3.8vh, 2.2rem);
     color: var(--color-parchment-border);
     margin: 0;
-    text-shadow: 2px 2px 0px rgba(0,0,0,0.1);
+    text-shadow: none;
 }
 
-.subtitle {
-    font-size: 1.2rem;
+.select-header .subtitle {
+    font-size: clamp(0.85rem, 1.8vh, 1rem);
     color: #7f8c8d;
-    margin-top: 4px;
-    margin-bottom: 24px;
+    margin: 2px 0 0 0;
+}
+
+.select-content-grid {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: clamp(10px, 2vw, 20px);
+    align-items: start;
+}
+
+.select-col-left, .select-col-right {
+    display: flex;
+    flex-direction: column;
+    gap: clamp(8px, 1.5vh, 14px);
 }
 
 .selection-section {
-    margin-bottom: 28px;
-    text-align: left;
+    margin-bottom: 0;
 }
 
 .step-title {
-    font-size: 1.3rem;
+    font-size: clamp(0.95rem, 2vh, 1.15rem);
     color: #34495e;
-    margin-bottom: 12px;
+    margin: 0 0 6px 0;
     border-bottom: 2px dashed #d5dbdb;
-    padding-bottom: 6px;
+    padding-bottom: 3px;
+    font-weight: 700;
 }
 
 .grade-toggle-group {
-    display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
-    gap: 16px;
+    display: flex;
+    flex-direction: column;
+    gap: 6px;
 }
 
-
 .grade-btn {
     background: #fff;
-    border: 3px solid #bdc3c7;
-    border-radius: 14px;
-    padding: 16px;
+    border: 2px solid #bdc3c7;
+    border-radius: 10px;
+    padding: clamp(6px, 1vh, 10px) 12px;
     cursor: pointer;
     display: flex;
-    flex-direction: column;
+    justify-content: space-between;
     align-items: center;
-    transition: all 0.2s ease;
     font-family: var(--font-main);
-}
-
-.grade-btn:hover {
-    transform: translateY(-2px);
-    border-color: var(--color-gold);
+    transition: all 0.15s ease;
 }
 
 .grade-btn.active {
     border-color: var(--color-gold);
     background: #fef9e7;
-    box-shadow: 0 4px 12px rgba(243, 156, 18, 0.3);
+    box-shadow: 0 2px 8px rgba(243, 156, 18, 0.3);
 }
 
-.grade-badge {
-    font-size: 1.3rem;
-    font-weight: 700;
-    color: #2c3e50;
-}
-
-.grade-desc {
-    font-size: 0.95rem;
-    color: #7f8c8d;
-    margin-top: 4px;
-}
+.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: grid;
-    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
-    gap: 16px;
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
 }
 
 .hero-card {
     background: #fff;
-    border: 3px solid #bdc3c7;
-    border-radius: 16px;
-    padding: 16px;
-    text-align: center;
+    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.25s ease;
-}
-
-.hero-card:hover {
-    transform: translateY(-4px);
-    border-color: var(--color-royal-blue);
+    transition: all 0.15s ease;
+    text-align: left;
 }
 
 .hero-card.selected-card {
     border-color: var(--color-gold);
     background: #fef9e7;
-    box-shadow: 0 6px 16px rgba(243, 156, 18, 0.4);
+    box-shadow: 0 3px 10px rgba(243, 156, 18, 0.35);
 }
 
-.hero-avatar {
-    font-size: 3rem;
-    margin-bottom: 8px;
-}
-
-.hero-name {
-    margin: 4px 0;
-    font-size: 1.2rem;
-    color: #2c3e50;
-}
-
-.hero-title {
-    font-size: 0.85rem;
-    color: #95a5a6;
-    font-weight: 600;
-}
-
-.hero-description {
-    font-size: 0.85rem;
-    color: #7f8c8d;
-    margin: 8px 0;
-}
-
-.hero-skill {
-    font-size: 0.8rem;
-    background: #eaeded;
-    padding: 4px 8px;
-    border-radius: 8px;
-    color: #34495e;
-}
+.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 {
     display: flex;
-    gap: 12px;
+    gap: 8px;
 }
 
 .hero-name-input {
     flex: 1;
-    padding: 14px 18px;
-    font-size: 1.1rem;
+    padding: clamp(8px, 1.5vh, 12px);
+    font-size: clamp(0.9rem, 2vh, 1.05rem);
     font-family: var(--font-main);
-    border: 3px solid #bdc3c7;
-    border-radius: 12px;
+    border: 2px solid #bdc3c7;
+    border-radius: 10px;
     outline: none;
 }
 
-.hero-name-input:focus {
-    border-color: var(--color-royal-blue);
-}
-
 .btn-start-quest {
     background: var(--color-forest);
     color: white;
-    font-size: 1.2rem;
+    font-size: clamp(0.95rem, 2vh, 1.15rem);
     font-weight: 700;
     font-family: var(--font-main);
     border: none;
-    border-radius: 12px;
-    padding: 14px 28px;
+    border-radius: 10px;
+    padding: clamp(8px, 1.5vh, 12px) clamp(12px, 2vw, 20px);
     cursor: pointer;
-    box-shadow: 0 4px 0 #1e8449;
-    transition: all 0.15s ease;
-}
-
-.btn-start-quest:hover {
-    transform: translateY(-2px);
-    box-shadow: 0 6px 0 #1e8449;
-}
-
-.btn-start-quest:active {
-    transform: translateY(2px);
-    box-shadow: 0 2px 0 #1e8449;
+    box-shadow: 0 3px 0 #1e8449;
+    white-space: nowrap;
 }
 
 /* ========================================================
-   WORLD MAP SCREEN
+   WORLD MAP (100% VIEWPORT FIT)
    ======================================================== */
 .world-map-screen {
+    height: 100%;
     display: flex;
     flex-direction: column;
-    gap: 20px;
+    gap: clamp(8px, 1.5vh, 14px);
+    overflow: hidden;
 }
 
 .map-top-bar {
     background: var(--color-parchment);
     border: 3px solid var(--color-parchment-border);
-    border-radius: 14px;
-    padding: 12px 20px;
+    border-radius: 12px;
+    padding: clamp(6px, 1vh, 10px) 16px;
     display: flex;
     justify-content: space-between;
     align-items: center;
+    flex: 0 0 auto;
 }
 
 .player-pill {
     display: flex;
     align-items: center;
-    gap: 10px;
+    gap: 8px;
     font-weight: 700;
+    font-size: clamp(0.9rem, 2vh, 1.1rem);
 }
 
 .grade-tag {
     background: var(--color-gold);
     color: white;
-    font-size: 0.8rem;
-    padding: 2px 8px;
+    font-size: 0.75rem;
+    padding: 2px 6px;
     border-radius: 6px;
 }
 
@@ -265,96 +373,69 @@ body, html {
     background: #ecf0f1;
     border: 2px solid #bdc3c7;
     border-radius: 8px;
-    padding: 6px 12px;
+    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;
+    display: flex;
+    flex-direction: column;
+    gap: clamp(8px, 1.5vh, 14px);
+    padding-right: 4px;
 }
 
 .world-card {
     background: var(--color-parchment);
-    border: 4px solid var(--color-parchment-border);
-    border-radius: 20px;
-    padding: 24px;
+    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;
-    color: #2c3e50;
-}
-
-.world-header p {
-    color: #7f8c8d;
-    margin: 4px 0 16px 0;
-}
+.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: 20px;
+    gap: clamp(8px, 1.5vw, 14px);
     flex-wrap: wrap;
 }
 
 .level-node {
     background: white;
-    border: 3px solid #bdc3c7;
-    border-radius: 16px;
-    padding: 16px 20px;
+    border: 2px solid #bdc3c7;
+    border-radius: 12px;
+    padding: clamp(8px, 1.5vh, 12px) 14px;
     display: flex;
     flex-direction: column;
     align-items: center;
-    min-width: 140px;
+    min-width: 110px;
     cursor: pointer;
     font-family: var(--font-main);
-    transition: all 0.2s ease;
+    transition: all 0.15s ease;
 }
 
-.level-node.unlocked {
-    border-color: var(--color-gold);
-    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
-}
-
-.level-node.unlocked:hover {
-    transform: translateY(-4px) scale(1.03);
-}
-
-.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: 2rem;
-    margin-bottom: 6px;
-}
-
-.level-title {
-    font-weight: 700;
-    font-size: 0.95rem;
-}
-
-.boss-tag {
-    background: var(--color-crimson);
-    color: white;
-    font-size: 0.7rem;
-    font-weight: 700;
-    padding: 2px 6px;
-    border-radius: 4px;
-    margin-top: 4px;
-}
+.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); }
 
 /* ========================================================
-   BATTLE ARENA
+   BATTLE ARENA (100% VIEWPORT FIT - NO SCROLL)
    ======================================================== */
 .battle-arena-wrapper {
+    height: 100%;
     display: flex;
     flex-direction: column;
-    gap: 16px;
+    justify-content: space-between;
+    gap: clamp(4px, 1vh, 10px);
+    overflow: hidden;
 }
 
 .battle-header {
@@ -363,52 +444,35 @@ body, html {
     align-items: center;
     background: var(--color-parchment);
     border: 3px solid var(--color-parchment-border);
-    border-radius: 12px;
-    padding: 8px 16px;
+    border-radius: 10px;
+    padding: clamp(4px, 0.8vh, 8px) 14px;
+    flex: 0 0 auto;
 }
 
 .btn-back {
     background: #ecf0f1;
     border: 2px solid #bdc3c7;
-    border-radius: 8px;
-    padding: 6px 14px;
+    border-radius: 6px;
+    padding: 3px 10px;
     font-weight: 700;
     cursor: pointer;
     font-family: var(--font-main);
+    font-size: 0.85rem;
 }
 
-.world-title {
-    font-size: 1.2rem;
-    font-weight: 700;
-}
-
-.boss-badge {
-    background: var(--color-crimson);
-    color: white;
-    padding: 2px 8px;
-    border-radius: 6px;
-    font-size: 0.8rem;
-    margin-left: 6px;
-}
-
-.combo-counter {
-    font-size: 1rem;
-    color: #7f8c8d;
-}
-
-.combo-counter.active-streak {
-    color: var(--color-gold-dark);
-    animation: bounce 0.5s infinite alternate;
-}
+.world-title { font-size: clamp(0.95rem, 2vh, 1.15rem); font-weight: 700; }
+.boss-badge { background: var(--color-crimson); color: white; padding: 2px 6px; border-radius: 4px; font-size: 0.7rem; margin-left: 4px; }
+.combo-counter { font-size: clamp(0.85rem, 1.8vh, 1rem); color: #7f8c8d; }
+.combo-counter.active-streak { color: var(--color-gold-dark); animation: bounce 0.5s infinite alternate; }
 
 .feedback-banner {
-    padding: 10px 16px;
-    border-radius: 10px;
+    padding: clamp(4px, 0.8vh, 8px) 12px;
+    border-radius: 8px;
     text-align: center;
     font-weight: 700;
-    font-size: 1.1rem;
+    font-size: clamp(0.9rem, 2vh, 1.05rem);
     color: white;
-    animation: fadeIn 0.3s ease;
+    flex: 0 0 auto;
 }
 
 .feedback-critical { background: var(--color-gold); text-shadow: 1px 1px 2px black; }
@@ -420,14 +484,15 @@ body, html {
 .arena-stage {
     display: grid;
     grid-template-columns: 1fr auto 1fr;
-    gap: 20px;
+    gap: clamp(8px, 2vw, 16px);
     align-items: center;
-    background: radial-gradient(circle, #5d6d7e 0%, #34495e 100%);
-    border: 4px solid var(--color-parchment-border);
-    border-radius: 20px;
-    padding: 20px;
-    min-height: 280px;
+    border: 3px solid var(--color-parchment-border);
+    border-radius: 16px;
+    padding: clamp(6px, 1.2vh, 12px);
+    flex: 1 1 auto;
+    min-height: 0;
     box-shadow: var(--shadow-storybook);
+    overflow: hidden;
 }
 
 .combatant {
@@ -435,56 +500,37 @@ body, html {
     flex-direction: column;
     align-items: center;
     text-align: center;
+    justify-content: center;
+    height: 100%;
 }
 
-.combatant-info {
-    margin-bottom: 10px;
-}
-
+.combatant-info { margin-bottom: 4px; }
 .combatant-name {
     color: white;
     font-weight: 700;
-    font-size: 1.2rem;
+    font-size: clamp(0.95rem, 2.2vh, 1.15rem);
     text-shadow: 1px 1px 3px black;
 }
 
-.hp-hearts {
-    display: flex;
-    gap: 4px;
-    margin-top: 4px;
-    font-size: 1.4rem;
-}
+.hp-hearts { display: flex; gap: 3px; font-size: clamp(1rem, 2.2vh, 1.3rem); }
 
 .hp-bar-wrapper {
-    width: 140px;
-    height: 18px;
+    width: clamp(100px, 15vw, 140px);
+    height: clamp(14px, 2vh, 18px);
     background: #7f8c8d;
-    border-radius: 10px;
+    border-radius: 8px;
     border: 2px solid white;
     position: relative;
     overflow: hidden;
-    margin-top: 4px;
 }
 
-.hp-bar-fill {
-    height: 100%;
-    background: #e74c3c;
-    transition: width 0.3s ease;
-}
-
-.hp-text {
-    position: absolute;
-    top: 0; left: 0; right: 0; bottom: 0;
-    font-size: 0.75rem;
-    color: white;
-    font-weight: 700;
-    line-height: 16px;
-}
+.hp-bar-fill { height: 100%; background: #e74c3c; transition: width 0.3s ease; }
+.hp-text { position: absolute; top: 0; left: 0; right: 0; bottom: 0; font-size: 0.7rem; color: white; font-weight: 700; line-height: 14px; }
 
 .character-sprite-box {
     position: relative;
-    width: 160px;
-    height: 200px;
+    width: clamp(90px, 16vw, 150px);
+    height: clamp(100px, 22vh, 180px);
     display: flex;
     justify-content: center;
     align-items: center;
@@ -492,167 +538,143 @@ body, html {
 
 .sprite-phase-indicator {
     position: absolute;
-    top: -10px;
+    top: -6px;
     background: rgba(0, 0, 0, 0.6);
     color: white;
-    font-size: 0.75rem;
-    padding: 2px 8px;
-    border-radius: 10px;
+    font-size: 0.65rem;
+    padding: 1px 6px;
+    border-radius: 8px;
+    z-index: 3;
 }
 
 .character-image {
     max-width: 100%;
     max-height: 100%;
     object-fit: contain;
-    filter: drop-shadow(0 8px 16px rgba(0,0,0,0.35));
+    filter: drop-shadow(0 6px 12px rgba(0,0,0,0.35));
 }
 
-
-
 .timer-orb {
-    width: 80px;
-    height: 80px;
+    width: clamp(54px, 10vh, 74px);
+    height: clamp(54px, 10vh, 74px);
     border-radius: 50%;
     display: flex;
     flex-direction: column;
     justify-content: center;
     align-items: center;
     color: white;
-    border: 4px solid white;
-    box-shadow: 0 0 15px rgba(255, 255, 255, 0.4);
+    border: 3px solid white;
+    box-shadow: 0 0 12px rgba(255, 255, 255, 0.4);
 }
 
 .timer-green { background: var(--color-forest); }
 .timer-yellow { background: var(--color-gold); }
 .timer-red { background: var(--color-crimson); animation: pulse 0.5s infinite; }
 
-.timer-seconds { font-size: 1.2rem; font-weight: 700; }
-.timer-label { font-size: 0.7rem; font-weight: 600; }
+.timer-seconds { font-size: clamp(0.95rem, 2vh, 1.15rem); font-weight: 700; }
+.timer-label { font-size: 0.65rem; font-weight: 600; }
 
 /* PARCHMENT ACTION BOARD */
 .parchment-action-board {
     background: var(--color-parchment);
-    border: 4px solid var(--color-parchment-border);
-    border-radius: 20px;
-    padding: 20px;
+    border: 3px solid var(--color-parchment-border);
+    border-radius: 16px;
+    padding: clamp(6px, 1vh, 10px) clamp(8px, 1.5vw, 16px);
     box-shadow: var(--shadow-storybook);
     text-align: center;
+    flex: 0 0 auto;
 }
 
-.equation-box {
-    margin-bottom: 16px;
-}
-
-.equation-title {
-    font-size: 1rem;
-    font-weight: 700;
-    color: #7f8c8d;
-}
-
+.equation-box { margin-bottom: clamp(4px, 0.8vh, 8px); }
+.equation-title { font-size: clamp(0.75rem, 1.6vh, 0.9rem); font-weight: 700; color: #7f8c8d; }
 .equation-text {
-    font-size: 2.8rem;
+    font-size: clamp(1.6rem, 4vh, 2.4rem);
     color: #2c3e50;
-    margin: 4px 0;
-    letter-spacing: 2px;
+    margin: 2px 0;
+    letter-spacing: 1.5px;
 }
 
 /* KEYPAD */
 .keypad-container {
-    max-width: 300px;
+    max-width: 260px;
     margin: 0 auto;
 }
 
 .keypad-display {
     background: white;
-    border: 3px solid #bdc3c7;
-    border-radius: 12px;
-    padding: 10px;
-    font-size: 2rem;
+    border: 2px solid #bdc3c7;
+    border-radius: 8px;
+    padding: 4px;
+    font-size: clamp(1.3rem, 3vh, 1.6rem);
     font-weight: 700;
-    margin-bottom: 12px;
-    min-height: 55px;
+    margin-bottom: 6px;
+    min-height: clamp(34px, 5vh, 42px);
+    display: flex;
+    justify-content: center;
+    align-items: center;
 }
 
 .keypad-grid {
     display: grid;
     grid-template-columns: repeat(3, 1fr);
-    gap: 8px;
+    gap: clamp(4px, 0.8vh, 6px);
 }
 
 .key-btn {
     background: white;
-    border: 3px solid #bdc3c7;
-    border-radius: 12px;
-    font-size: 1.5rem;
+    border: 2px solid #bdc3c7;
+    border-radius: 8px;
+    font-size: clamp(1.1rem, 2.4vh, 1.3rem);
     font-weight: 700;
     font-family: var(--font-main);
-    padding: 12px 0;
+    padding: clamp(4px, 0.9vh, 8px) 0;
     cursor: pointer;
-    box-shadow: 0 4px 0 #bdc3c7;
-    transition: all 0.1s ease;
+    box-shadow: 0 3px 0 #bdc3c7;
 }
 
-.key-btn:active {
-    transform: translateY(3px);
-    box-shadow: 0 1px 0 #bdc3c7;
-}
-
-.key-btn.action-key.backspace { background: #fadbd8; border-color: #e74c3c; box-shadow: 0 4px 0 #cb4335; }
-.key-btn.action-key.submit { background: #d4efdf; border-color: #27ae60; box-shadow: 0 4px 0 #1e8449; }
+.key-btn:active { transform: translateY(2px); box-shadow: 0 1px 0 #bdc3c7; }
+.key-btn.action-key.backspace { background: #fadbd8; border-color: #e74c3c; box-shadow: 0 3px 0 #cb4335; }
+.key-btn.action-key.submit { background: #d4efdf; border-color: #27ae60; box-shadow: 0 3px 0 #1e8449; }
 
 /* CHOICES */
 .choices-grid {
     display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
-    gap: 16px;
-    max-width: 500px;
+    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
+    gap: 10px;
+    max-width: 440px;
     margin: 0 auto;
 }
 
 .choice-btn {
     background: white;
-    border: 4px solid var(--color-gold);
-    border-radius: 16px;
-    padding: 18px 0;
-    font-size: 1.8rem;
+    border: 3px solid var(--color-gold);
+    border-radius: 12px;
+    padding: clamp(8px, 1.8vh, 14px) 0;
+    font-size: clamp(1.2rem, 2.8vh, 1.6rem);
     font-weight: 700;
     font-family: var(--font-main);
     cursor: pointer;
-    box-shadow: 0 5px 0 var(--color-gold-dark);
-    transition: all 0.1s ease;
+    box-shadow: 0 4px 0 var(--color-gold-dark);
 }
 
-.choice-btn:hover {
-    background: #fef9e7;
-    transform: translateY(-2px);
-}
-
-.choice-btn:active {
-    transform: translateY(3px);
-    box-shadow: 0 2px 0 var(--color-gold-dark);
-}
+.choice-btn:hover { background: #fef9e7; }
+.choice-btn:active { transform: translateY(2px); box-shadow: 0 2px 0 var(--color-gold-dark); }
 
 /* VICTORY / DEFEAT CARDS */
-.battle-end-card {
-    padding: 24px;
-    border-radius: 16px;
-}
-
-.battle-end-card h2 { font-size: 2.2rem; margin: 0; }
-.battle-end-card p { font-size: 1.2rem; margin: 12px 0 24px 0; }
-
+.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: 1.2rem;
+    font-size: clamp(0.95rem, 2vh, 1.15rem);
     font-weight: 700;
     font-family: var(--font-main);
-    padding: 12px 28px;
+    padding: 8px 22px;
     border: none;
-    border-radius: 12px;
+    border-radius: 10px;
     cursor: pointer;
-    box-shadow: 0 4px 0 rgba(0,0,0,0.2);
 }
 
 .next-level-btn { background: var(--color-forest); color: white; }
@@ -677,212 +699,31 @@ body, html {
 
 .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; }
 .anim-enemy-attack { animation: enemyAttackDash 0.8s ease-out; }
 .anim-hero-hurt, .anim-enemy-hurt { animation: hurtShake 0.5s ease-in-out; }
 
 @keyframes idleBreathe {
     0%, 100% { transform: scale(1) translateY(0); }
-    50% { transform: scale(1.02) translateY(-4px); }
+    50% { transform: scale(1.02) translateY(-3px); }
 }
 
 @keyframes heroAttackDash {
     0% { transform: translateX(0); }
-    30% { transform: translateX(40px) scale(1.1) rotate(5deg); }
+    30% { transform: translateX(35px) scale(1.08) rotate(4deg); }
     100% { transform: translateX(0); }
 }
 
 @keyframes enemyAttackDash {
     0% { transform: translateX(0); }
-    30% { transform: translateX(-40px) scale(1.1) rotate(-5deg); }
+    30% { transform: translateX(-35px) scale(1.08) rotate(-4deg); }
     100% { transform: translateX(0); }
 }
 
 @keyframes hurtShake {
     0%, 100% { transform: translateX(0); filter: brightness(1); }
-    20%, 60% { transform: translateX(-10px); filter: brightness(1.5) saturate(2); }
-    40%, 80% { transform: translateX(10px); }
-}
-
-/* ========================================================
-   PC GAME MAIN MENU SCREEN
-   ======================================================== */
-.viewport-fullscreen {
-    max-width: 100% !important;
-    padding: 0 !important;
-    margin: 0 !important;
-}
-
-.main-menu-fullscreen {
-    min-height: 100vh;
-    width: 100vw;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    position: relative;
-    overflow: hidden;
-}
-
-.main-menu-overlay {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: space-between;
-    min-height: 90vh;
-    padding: 40px 20px;
-    z-index: 2;
-}
-
-.title-logo-box {
-    text-align: center;
-    margin-top: 20px;
-    animation: fadeIn 0.8s ease-out;
-}
-
-.title-crown {
-    font-size: 3.5rem;
-    filter: drop-shadow(0 4px 10px rgba(0,0,0,0.4));
-    animation: bounce 1.5s infinite alternate;
-}
-
-.main-game-title {
-    font-size: 3.8rem;
-    font-weight: 900;
-    color: #fff;
-    text-shadow: 
-        3px 3px 0px #8b5a2b,
-        -3px -3px 0px #8b5a2b,
-        3px -3px 0px #8b5a2b,
-        -3px 3px 0px #8b5a2b,
-        0 8px 16px rgba(0,0,0,0.6);
-    margin: 0;
-    letter-spacing: 3px;
-}
-
-.title-banner {
-    display: inline-block;
-    background: linear-gradient(135deg, #f39c12, #d68910);
-    color: white;
-    font-size: 1.3rem;
-    font-weight: 700;
-    padding: 6px 28px;
-    border-radius: 20px;
-    border: 3px solid #fff;
-    box-shadow: 0 6px 14px rgba(0,0,0,0.3);
-    margin-top: 8px;
-    text-shadow: 1px 1px 2px rgba(0,0,0,0.4);
-}
-
-.menu-actions-parchment {
-    background: rgba(252, 246, 232, 0.95);
-    border: 5px solid var(--color-parchment-border);
-    border-radius: 24px;
-    padding: 30px 36px;
-    display: flex;
-    flex-direction: column;
-    gap: 16px;
-    width: 100%;
-    max-width: 480px;
-    box-shadow: 0 12px 32px rgba(0,0,0,0.4);
-    backdrop-filter: blur(4px);
-    animation: fadeIn 1s ease-out;
-}
-
-.pc-menu-btn {
-    background: #fff;
-    border: 3px solid #bdc3c7;
-    border-radius: 16px;
-    padding: 14px 20px;
-    display: flex;
-    align-items: center;
-    gap: 16px;
-    cursor: pointer;
-    font-family: var(--font-main);
-    transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
-    text-align: left;
-    box-shadow: 0 4px 0 #bdc3c7;
-}
-
-.pc-menu-btn:hover {
-    transform: translateY(-4px) scale(1.02);
-    border-color: var(--color-gold);
-}
-
-.pc-menu-btn:active {
-    transform: translateY(2px) scale(0.98);
-}
-
-.pc-menu-btn.new-game-btn {
-    background: #e8f8f5;
-    border-color: #27ae60;
-    box-shadow: 0 5px 0 #1e8449;
-}
-
-.pc-menu-btn.new-game-btn:hover {
-    background: #d4efdf;
-    box-shadow: 0 8px 0 #1e8449;
-}
-
-.pc-menu-btn.continue-btn {
-    background: #fef9e7;
-    border-color: var(--color-gold);
-    box-shadow: 0 5px 0 var(--color-gold-dark);
-}
-
-.pc-menu-btn.continue-btn:hover {
-    background: #fdebd0;
-    box-shadow: 0 8px 0 var(--color-gold-dark);
-}
-
-.pc-menu-btn.reset-btn {
-    background: transparent;
-    border: 2px dashed #e74c3c;
-    color: #c0392b;
-    box-shadow: none;
-    padding: 8px 16px;
-    justify-content: center;
-}
-
-.pc-menu-btn.reset-btn:hover {
-    background: #fadbd8;
-    transform: translateY(-2px);
-}
-
-.btn-icon {
-    font-size: 2.2rem;
-}
-
-.btn-text-block {
-    display: flex;
-    flex-direction: column;
-}
-
-.btn-title {
-    font-size: 1.4rem;
-    font-weight: 800;
-    color: #2c3e50;
-}
-
-.btn-subtitle {
-    font-size: 0.85rem;
-    color: #7f8c8d;
-    margin-top: 2px;
-}
-
-.btn-title-small {
-    font-size: 0.95rem;
-    font-weight: 700;
-}
-
-.main-menu-footer {
-    color: white;
-    font-weight: 600;
-    text-shadow: 1px 1px 3px rgba(0,0,0,0.8);
-    font-size: 1rem;
-    background: rgba(0, 0, 0, 0.4);
-    padding: 6px 18px;
-    border-radius: 12px;
+    20%, 60% { transform: translateX(-8px); filter: brightness(1.4) saturate(1.8); }
+    40%, 80% { transform: translateX(8px); }
 }
 
 /* ========================================================
@@ -892,49 +733,36 @@ body, html {
     display: flex;
     justify-content: center;
     align-items: center;
-    min-height: 100vh;
+    height: 100vh;
+    max-height: 100dvh;
     width: 100vw;
     background: radial-gradient(circle, #34495e 0%, #1a252f 100%);
     font-family: var(--font-main, sans-serif);
+    overflow: hidden;
 }
 
 .wasm-loader-box {
     background: #fcf6e8;
     border: 4px solid #8b5a2b;
-    border-radius: 24px;
-    padding: 36px 48px;
+    border-radius: 20px;
+    padding: clamp(20px, 4vh, 32px) clamp(24px, 4vw, 44px);
     text-align: center;
     box-shadow: 0 12px 32px rgba(0,0,0,0.5);
-    max-width: 420px;
+    max-width: 400px;
     width: 90%;
 }
 
-.wasm-crown {
-    font-size: 3rem;
-    animation: bounce 1.2s infinite alternate;
-}
-
-.wasm-title {
-    font-size: 2.2rem;
-    color: #8b5a2b;
-    margin: 8px 0 4px 0;
-    font-weight: 800;
-}
-
-.wasm-subtitle {
-    color: #7f8c8d;
-    font-size: 1rem;
-    margin-bottom: 20px;
-}
+.wasm-crown { font-size: clamp(2rem, 5vh, 2.8rem); animation: bounce 1.2s infinite alternate; }
+.wasm-title { font-size: clamp(1.6rem, 4vh, 2rem); color: #8b5a2b; margin: 6px 0 2px 0; font-weight: 800; }
+.wasm-subtitle { color: #7f8c8d; font-size: 0.9rem; margin-bottom: 16px; }
 
 .wasm-progress-bar {
     width: 100%;
-    height: 14px;
+    height: 12px;
     background: #e0d7c6;
-    border-radius: 10px;
+    border-radius: 8px;
     overflow: hidden;
     border: 2px solid #8b5a2b;
-    position: relative;
 }
 
 .wasm-progress-fill {
@@ -942,7 +770,7 @@ body, html {
     width: 100%;
     background: linear-gradient(90deg, #f39c12, #27ae60, #f39c12);
     background-size: 200% 100%;
-    border-radius: 8px;
+    border-radius: 6px;
     animation: progressShimmer 1.5s infinite linear;
 }
 
@@ -958,7 +786,7 @@ body, html {
     box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
     display: none;
     left: 0;
-    padding: 0.8rem 1.25rem 0.8rem 1.25rem;
+    padding: 0.8rem 1.25rem;
     position: fixed;
     width: 100%;
     z-index: 10000;
@@ -966,15 +794,5 @@ body, html {
     font-weight: 700;
 }
 
-#blazor-error-ui .reload {
-    color: #1e8449;
-    margin-left: 1rem;
-    text-decoration: underline;
-}
-
-#blazor-error-ui .dismiss {
-    cursor: pointer;
-    position: absolute;
-    right: 0.75rem;
-    top: 0.5rem;
-}
+#blazor-error-ui .reload { color: #1e8449; margin-left: 1rem; text-decoration: underline; }
+#blazor-error-ui .dismiss { cursor: pointer; position: absolute; right: 0.75rem; top: 0.5rem; }
diff --git a/src/CiselnaVyprava/wwwroot/favicon.ico b/src/CiselnaVyprava/wwwroot/favicon.ico
new file mode 100644
index 0000000..54f4cc4
--- /dev/null
+++ b/src/CiselnaVyprava/wwwroot/favicon.ico
@@ -0,0 +1,35 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" width="64" height="64">
+  <defs>
+    <linearGradient id="shieldGrad" x1="0%" y1="0%" x2="100%" y2="100%">
+      <stop offset="0%" stop-color="#f39c12"/>
+      <stop offset="100%" stop-color="#d68910"/>
+    </linearGradient>
+    <linearGradient id="crestGrad" x1="0%" y1="0%" x2="0%" y2="100%">
+      <stop offset="0%" stop-color="#2980b9"/>
+      <stop offset="100%" stop-color="#1f618d"/>
+    </linearGradient>
+    <filter id="shadow" x="-10%" y="-10%" width="120%" height="120%">
+      <feDropShadow dx="0" dy="2" stdDeviation="2" flood-color="#000" flood-opacity="0.3"/>
+    </filter>
+  </defs>
+  
+  <!-- Outer Shield -->
+  <path d="M 32 4 C 48 4 58 10 58 10 C 58 38 46 54 32 60 C 18 54 6 38 6 10 C 6 10 16 4 32 4 Z" 
+        fill="url(#shieldGrad)" stroke="#7e5109" stroke-width="2.5" filter="url(#shadow)"/>
+  
+  <!-- Inner Shield Inlay -->
+  <path d="M 32 8 C 45 8 53 13 53 13 C 53 36 43 49 32 54 C 21 49 11 36 11 13 C 11 13 19 8 32 8 Z" 
+        fill="url(#crestGrad)" stroke="#fcf6e8" stroke-width="1.5"/>
+
+  <!-- Golden Crown on Top -->
+  <path d="M 22 24 L 25 17 L 32 21 L 39 17 L 42 24 L 40 28 L 24 28 Z" 
+        fill="#f1c40f" stroke="#b7950b" stroke-width="1"/>
+  
+  <!-- Math Spark Symbol (7 x 8 = 56 spirit) -->
+  <text x="32" y="44" font-family="'Fredoka', 'Arial Black', sans-serif" font-size="16" font-weight="900" fill="#ffffff" text-anchor="middle" letter-spacing="1">123</text>
+  
+  <!-- Small Star Sparkles -->
+  <circle cx="21" cy="20" r="1.5" fill="#ffffff"/>
+  <circle cx="43" cy="20" r="1.5" fill="#ffffff"/>
+  <circle cx="32" cy="15" r="1.5" fill="#ffffff"/>
+</svg>
diff --git a/src/CiselnaVyprava/wwwroot/favicon.png b/src/CiselnaVyprava/wwwroot/favicon.png
new file mode 100644
index 0000000..54f4cc4
--- /dev/null
+++ b/src/CiselnaVyprava/wwwroot/favicon.png
@@ -0,0 +1,35 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" width="64" height="64">
+  <defs>
+    <linearGradient id="shieldGrad" x1="0%" y1="0%" x2="100%" y2="100%">
+      <stop offset="0%" stop-color="#f39c12"/>
+      <stop offset="100%" stop-color="#d68910"/>
+    </linearGradient>
+    <linearGradient id="crestGrad" x1="0%" y1="0%" x2="0%" y2="100%">
+      <stop offset="0%" stop-color="#2980b9"/>
+      <stop offset="100%" stop-color="#1f618d"/>
+    </linearGradient>
+    <filter id="shadow" x="-10%" y="-10%" width="120%" height="120%">
+      <feDropShadow dx="0" dy="2" stdDeviation="2" flood-color="#000" flood-opacity="0.3"/>
+    </filter>
+  </defs>
+  
+  <!-- Outer Shield -->
+  <path d="M 32 4 C 48 4 58 10 58 10 C 58 38 46 54 32 60 C 18 54 6 38 6 10 C 6 10 16 4 32 4 Z" 
+        fill="url(#shieldGrad)" stroke="#7e5109" stroke-width="2.5" filter="url(#shadow)"/>
+  
+  <!-- Inner Shield Inlay -->
+  <path d="M 32 8 C 45 8 53 13 53 13 C 53 36 43 49 32 54 C 21 49 11 36 11 13 C 11 13 19 8 32 8 Z" 
+        fill="url(#crestGrad)" stroke="#fcf6e8" stroke-width="1.5"/>
+
+  <!-- Golden Crown on Top -->
+  <path d="M 22 24 L 25 17 L 32 21 L 39 17 L 42 24 L 40 28 L 24 28 Z" 
+        fill="#f1c40f" stroke="#b7950b" stroke-width="1"/>
+  
+  <!-- Math Spark Symbol (7 x 8 = 56 spirit) -->
+  <text x="32" y="44" font-family="'Fredoka', 'Arial Black', sans-serif" font-size="16" font-weight="900" fill="#ffffff" text-anchor="middle" letter-spacing="1">123</text>
+  
+  <!-- Small Star Sparkles -->
+  <circle cx="21" cy="20" r="1.5" fill="#ffffff"/>
+  <circle cx="43" cy="20" r="1.5" fill="#ffffff"/>
+  <circle cx="32" cy="15" r="1.5" fill="#ffffff"/>
+</svg>
diff --git a/src/CiselnaVyprava/wwwroot/favicon.svg b/src/CiselnaVyprava/wwwroot/favicon.svg
new file mode 100644
index 0000000..54f4cc4
--- /dev/null
+++ b/src/CiselnaVyprava/wwwroot/favicon.svg
@@ -0,0 +1,35 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" width="64" height="64">
+  <defs>
+    <linearGradient id="shieldGrad" x1="0%" y1="0%" x2="100%" y2="100%">
+      <stop offset="0%" stop-color="#f39c12"/>
+      <stop offset="100%" stop-color="#d68910"/>
+    </linearGradient>
+    <linearGradient id="crestGrad" x1="0%" y1="0%" x2="0%" y2="100%">
+      <stop offset="0%" stop-color="#2980b9"/>
+      <stop offset="100%" stop-color="#1f618d"/>
+    </linearGradient>
+    <filter id="shadow" x="-10%" y="-10%" width="120%" height="120%">
+      <feDropShadow dx="0" dy="2" stdDeviation="2" flood-color="#000" flood-opacity="0.3"/>
+    </filter>
+  </defs>
+  
+  <!-- Outer Shield -->
+  <path d="M 32 4 C 48 4 58 10 58 10 C 58 38 46 54 32 60 C 18 54 6 38 6 10 C 6 10 16 4 32 4 Z" 
+        fill="url(#shieldGrad)" stroke="#7e5109" stroke-width="2.5" filter="url(#shadow)"/>
+  
+  <!-- Inner Shield Inlay -->
+  <path d="M 32 8 C 45 8 53 13 53 13 C 53 36 43 49 32 54 C 21 49 11 36 11 13 C 11 13 19 8 32 8 Z" 
+        fill="url(#crestGrad)" stroke="#fcf6e8" stroke-width="1.5"/>
+
+  <!-- Golden Crown on Top -->
+  <path d="M 22 24 L 25 17 L 32 21 L 39 17 L 42 24 L 40 28 L 24 28 Z" 
+        fill="#f1c40f" stroke="#b7950b" stroke-width="1"/>
+  
+  <!-- Math Spark Symbol (7 x 8 = 56 spirit) -->
+  <text x="32" y="44" font-family="'Fredoka', 'Arial Black', sans-serif" font-size="16" font-weight="900" fill="#ffffff" text-anchor="middle" letter-spacing="1">123</text>
+  
+  <!-- Small Star Sparkles -->
+  <circle cx="21" cy="20" r="1.5" fill="#ffffff"/>
+  <circle cx="43" cy="20" r="1.5" fill="#ffffff"/>
+  <circle cx="32" cy="15" r="1.5" fill="#ffffff"/>
+</svg>
diff --git a/src/CiselnaVyprava/wwwroot/index.html b/src/CiselnaVyprava/wwwroot/index.html
index d2a35ef..d17b325 100644
--- a/src/CiselnaVyprava/wwwroot/index.html
+++ b/src/CiselnaVyprava/wwwroot/index.html
@@ -9,10 +9,13 @@
     <link rel="preconnect" href="https://fonts.googleapis.com">
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
     <link href="https://fonts.googleapis.com/css2?family=Fredoka:wght@400;600;700&family=Nunito:wght@400;700;900&display=swap" rel="stylesheet">
+    <link rel="icon" type="image/svg+xml" href="favicon.svg" />
+    <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>
 
diff --git a/src/CiselnaVyprava/wwwroot/web.config b/src/CiselnaVyprava/wwwroot/web.config
new file mode 100644
index 0000000..b9cf00e
--- /dev/null
+++ b/src/CiselnaVyprava/wwwroot/web.config
@@ -0,0 +1,89 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<configuration>
+  <system.webServer>
+    <!-- Static Content & MIME mappings -->
+    <staticContent>
+      <!-- Blazor WASM binaries -->
+      <remove fileExtension=".wasm" />
+      <mimeMap fileExtension=".wasm" mimeType="application/wasm" />
+
+      <remove fileExtension=".json" />
+      <mimeMap fileExtension=".json" mimeType="application/json" />
+
+      <remove fileExtension=".dll" />
+      <mimeMap fileExtension=".dll" mimeType="application/octet-stream" />
+
+      <remove fileExtension=".dat" />
+      <mimeMap fileExtension=".dat" mimeType="application/octet-stream" />
+
+      <remove fileExtension=".blat" />
+      <mimeMap fileExtension=".blat" mimeType="application/octet-stream" />
+
+      <remove fileExtension=".pdb" />
+      <mimeMap fileExtension=".pdb" mimeType="application/octet-stream" />
+
+      <remove fileExtension=".symbols" />
+      <mimeMap fileExtension=".symbols" mimeType="application/octet-stream" />
+
+      <!-- Fonts -->
+      <remove fileExtension=".woff" />
+      <mimeMap fileExtension=".woff" mimeType="font/woff" />
+
+      <remove fileExtension=".woff2" />
+      <mimeMap fileExtension=".woff2" mimeType="font/woff2" />
+
+      <!-- Images & Media -->
+      <remove fileExtension=".webp" />
+      <mimeMap fileExtension=".webp" mimeType="image/webp" />
+
+      <remove fileExtension=".svg" />
+      <mimeMap fileExtension=".svg" mimeType="image/svg+xml" />
+
+      <remove fileExtension=".png" />
+      <mimeMap fileExtension=".png" mimeType="image/png" />
+
+      <remove fileExtension=".jpg" />
+      <mimeMap fileExtension=".jpg" mimeType="image/jpeg" />
+
+      <remove fileExtension=".jpeg" />
+      <mimeMap fileExtension=".jpeg" mimeType="image/jpeg" />
+
+      <!-- Audio -->
+      <remove fileExtension=".mp3" />
+      <mimeMap fileExtension=".mp3" mimeType="audio/mpeg" />
+
+      <remove fileExtension=".ogg" />
+      <mimeMap fileExtension=".ogg" mimeType="audio/ogg" />
+
+      <remove fileExtension=".wav" />
+      <mimeMap fileExtension=".wav" mimeType="audio/wav" />
+    </staticContent>
+
+    <!-- URL Rewrite for Single Page Application (SPA routing) -->
+    <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" />
+          </conditions>
+          <action type="Rewrite" url="/" />
+        </rule>
+      </rules>
+    </rewrite>
+
+    <httpProtocol>
+      <customHeaders>
+        <add name="X-Content-Type-Options" value="nosniff" />
+      </customHeaders>
+    </httpProtocol>
+  </system.webServer>
+</configuration>