improvfmeents

2026-09-04 11:31:52 +02:00
parent 7ca0e08637
commit d4e0071f95
14 changed files with 941 additions and 61 deletions
@@ -2,6 +2,7 @@

 <div class="game-card marias-card @(IsBack ? "card-back" : "") @(IsPlayable ? "playable" : (IsInteractive && !IsPlayable ? "unplayable" : "")) @CustomClass"
     style="@CustomStyle"
+     data-card-index="@CardIndex"
     @onclick="HandleClick">

    @if (IsBack || Card == null)
@@ -20,6 +21,7 @@
    [Parameter] public bool IsBack { get; set; } = false;
    [Parameter] public bool IsPlayable { get; set; } = false;
    [Parameter] public bool IsInteractive { get; set; } = false;
+    [Parameter] public int? CardIndex { get; set; }
    [Parameter] public string CustomClass { get; set; } = "";
    [Parameter] public string CustomStyle { get; set; } = "";
    [Parameter] public EventCallback<Card> OnCardClicked { get; set; }
@@ -1,79 +1,115 @@
@namespace Faraon.Client.Components

-<div class="game-over-overlay">
-    <div class="game-over-card">
-        <div class="game-over-title">
+<div class="match-summary-backdrop">
+    <div class="match-summary-card">
+        <div class="game-over-title" style="margin-bottom: 8px;">
            @if (IsOlympicMode)
            {
                <span>🏆 OLYMPIJSKÝ ŠAMPIÓN 👑</span>
            }
            else
            {
-                <span>Výsledky Hry 👑</span>
+                <span>🏆 VÝSLEDKY ZÁPASU 👑</span>
            }
        </div>

-        @if (IsOlympicMode && MatchWinner != null)
-        {
-            <div style="background: linear-gradient(135deg, rgba(245, 176, 65, 0.25), rgba(212, 172, 13, 0.15)); border: 2px solid var(--gold); border-radius: 14px; padding: 14px; margin-bottom: 18px; text-align: center;">
-                <div style="font-size: 2.2rem; margin-bottom: 4px;">🥇👑</div>
-                <div style="font-size: 1.35rem; font-weight: 900; color: var(--gold);">
-                    @MatchWinner.Avatar @MatchWinner.Name
+        <!-- 3D PÓDIUM VÍŤAZOV -->
+        @{
+            var sortedPlayers = Players.OrderBy(p => p.IsEliminated ? 1 : 0).ThenBy(p => p.FinishedPosition ?? 99).ToList();
+            var firstPlace = MatchWinner ?? sortedPlayers.FirstOrDefault(p => p.FinishedPosition == 1) ?? sortedPlayers.FirstOrDefault();
+            var secondPlace = sortedPlayers.Count > 1 ? (sortedPlayers.FirstOrDefault(p => p != firstPlace && p.FinishedPosition == 2) ?? sortedPlayers.Skip(1).FirstOrDefault()) : null;
+            var thirdPlace = sortedPlayers.Count > 2 ? (sortedPlayers.FirstOrDefault(p => p != firstPlace && p != secondPlace && p.FinishedPosition == 3) ?? sortedPlayers.Skip(2).FirstOrDefault()) : null;
+        }
+
+        <div class="podium-container">
+            <!-- 2. MIESTO (STRIEBRO) -->
+            @if (secondPlace != null)
+            {
+                <div class="podium-column">
+                    <div class="podium-avatar-box">
+                        <div class="podium-avatar">@secondPlace.GetLiveAvatar()</div>
+                    </div>
+                    <div class="podium-name">@secondPlace.Name</div>
+                    <div class="podium-step step-silver">2</div>
                </div>
-                <div style="font-size: 0.9rem; color: #f1f5f9; margin-top: 4px;">
-                    Prežil všetky kolá ako jediný hráč a zvíťazil v Olympijskom turnaji!
+            }
+
+            <!-- 1. MIESTO (ZLATO) -->
+            @if (firstPlace != null)
+            {
+                <div class="podium-column">
+                    <div class="podium-avatar-box">
+                        <div class="podium-crown">👑</div>
+                        <div class="podium-avatar" style="font-size: 3.2rem;">@firstPlace.GetLiveAvatar()</div>
+                    </div>
+                    <div class="podium-name" style="color: var(--gold); font-size: 0.95rem;">@firstPlace.Name</div>
+                    <div class="podium-step step-gold">1</div>
+                </div>
+            }
+
+            <!-- 3. MIESTO (BRONZ) -->
+            @if (thirdPlace != null)
+            {
+                <div class="podium-column">
+                    <div class="podium-avatar-box">
+                        <div class="podium-avatar">@thirdPlace.GetLiveAvatar()</div>
+                    </div>
+                    <div class="podium-name">@thirdPlace.Name</div>
+                    <div class="podium-step step-bronze">3</div>
+                </div>
+            }
+        </div>
+
+        <!-- ŠTATISTIKY ZÁPASU -->
+        @if (Stats != null)
+        {
+            <div class="match-stats-grid">
+                <div class="stat-badge-box">
+                    <span class="stat-badge-icon">👑</span>
+                    <div>
+                        <div class="stat-badge-title">MVP Zápasu</div>
+                        <div class="stat-badge-value">@Stats.GetMvpPlayerName()</div>
+                    </div>
+                </div>
+
+                <div class="stat-badge-box">
+                    <span class="stat-badge-icon">🎒</span>
+                    <div>
+                        <div class="stat-badge-title">Najväčší trest</div>
+                        <div class="stat-badge-value">
+                            @(Stats.MaxPenaltyDrawnInOneTurn > 0 ? $"+{Stats.MaxPenaltyDrawnInOneTurn} ({Stats.MaxPenaltyPlayerName})" : "Žiadny")
+                        </div>
+                    </div>
+                </div>
+
+                <div class="stat-badge-box">
+                    <span class="stat-badge-icon">⏱️</span>
+                    <div>
+                        <div class="stat-badge-title">Čas & Ťahy</div>
+                        <div class="stat-badge-value">
+                            @($"{(int)Stats.Duration.TotalMinutes}m {Stats.Duration.Seconds:D2}s • {Stats.TotalTurns} ťahov")
+                        </div>
+                    </div>
+                </div>
+
+                <div class="stat-badge-box">
+                    <span class="stat-badge-icon">🔥</span>
+                    <div>
+                        <div class="stat-badge-title">Spálenia & Esá</div>
+                        <div class="stat-badge-value">
+                            @($"{Stats.TotalCardsBurned / 4}x spálenie • {Stats.TotalAcesPlayed} es")
+                        </div>
+                    </div>
                </div>
            </div>
        }

-        <div class="podium-list">
-            @foreach (var player in Players.OrderBy(p => p.IsEliminated ? 1 : 0).ThenBy(p => p.FinishedPosition ?? 99))
-            {
-                <div class="podium-row @((MatchWinner != null && player == MatchWinner) || (!IsOlympicMode && player.FinishedPosition == 1) ? "winner" : "")">
-                    <div class="podium-pos">
-                        @if ((MatchWinner != null && player == MatchWinner) || (!IsOlympicMode && player.FinishedPosition == 1)) { <span>🥇</span> }
-                        else if (player.FinishedPosition == 2) { <span>🥈</span> }
-                        else if (player.FinishedPosition == 3) { <span>🥉</span> }
-                        else { <span>#@(player.FinishedPosition ?? 4)</span> }
-                    </div>
-                    <div class="podium-player">
-                        <span>@player.Avatar</span>
-                        <span>@player.Name</span>
-                        @if (player.Type == PlayerType.AI)
-                        {
-                            <span style="font-size: 0.75rem; opacity: 0.7;">(AI)</span>
-                        }
-                    </div>
-                    <div style="font-weight: 800;">
-                        @if (IsOlympicMode)
-                        {
-                            if (player == MatchWinner)
-                            {
-                                <span style="color: var(--gold);">Šampión! 🏆</span>
-                            }
-                            else if (player.IsEliminated)
-                            {
-                                <span style="color: #ef4444;">Vyradený ☠️</span>
-                            }
-                            else
-                            {
-                                <span>@player.OlympicCardsCount kariet</span>
-                            }
-                        }
-                        else
-                        {
-                            <span>@(player.FinishedPosition == 1 ? "Víťaz! 🎉" : $"{player.FinishedPosition}. miesto")</span>
-                        }
-                    </div>
-                </div>
-            }
-        </div>
-
-        <div style="display: flex; gap: 12px; justify-content: center;">
-            <button class="btn-primary-glow" @onclick="OnPlayAgain">
-                Hrať znova 🔄
+        <!-- AKČNÉ TLAČIDLÁ -->
+        <div style="display: flex; gap: 12px; justify-content: center; margin-top: 8px;">
+            <button class="btn-primary-glow" style="padding: 12px 30px;" @onclick="OnPlayAgain">
+                Hrať znova ⚔️
            </button>
-            <button class="btn-pill" style="padding: 12px 24px;" @onclick="OnBackToLobby">
+            <button class="btn-pill" style="padding: 12px 26px;" @onclick="OnBackToLobby">
                Do Lobby 🏠
            </button>
        </div>
@@ -84,6 +120,7 @@
    [Parameter] public List<Player> Players { get; set; } = new();
    [Parameter] public bool IsOlympicMode { get; set; } = false;
    [Parameter] public Player? MatchWinner { get; set; }
+    [Parameter] public GameMatchStats? Stats { get; set; }
    [Parameter] public EventCallback OnPlayAgain { get; set; }
    [Parameter] public EventCallback OnBackToLobby { get; set; }
 }
@@ -217,6 +217,28 @@
            }
        </div>

+        <!-- Výber atmosféry herného stola -->
+        <div style="margin-bottom: 24px;">
+            <div style="font-weight: 800; color: var(--gold); font-size: 0.95rem; letter-spacing: 0.5px; margin-bottom: 10px; display: flex; align-items: center; gap: 8px;">
+                <span>🌲</span>
+                <span>ATMOSFÉRA & PLÁTNO HERNÉHO STOLA</span>
+            </div>
+            <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 10px;">
+                @foreach (var t in TableThemes)
+                {
+                    <div class="deck-option-card @(Rules.TableTheme == t.Theme ? "selected-deck" : "")"
+                         style="padding: 10px 14px; cursor: pointer; display: flex; align-items: center; gap: 10px;"
+                         @onclick="() => Rules.TableTheme = t.Theme">
+                        <div style="font-size: 1.8rem;">@t.Icon</div>
+                        <div class="deck-info" style="flex: 1;">
+                            <div class="deck-name" style="font-size: 0.92rem; color: var(--gold);">@t.Name</div>
+                            <div class="deck-desc" style="font-size: 0.76rem;">@t.Desc</div>
+                        </div>
+                    </div>
+                }
+            </div>
+        </div>
+
        <!-- Štart tlačidlo -->
        <div style="text-align: center;">
            <button class="btn-primary-glow" style="padding: 14px 45px; font-size: 1.25rem;" @onclick="StartGame">
@@ -235,6 +257,15 @@
    private bool ShowDeckSelector = false;

    private record DeckInfo(string Id, string Name, string Desc, string Thumb, string Back);
+    private record ThemeOption(TableTheme Theme, string Name, string Desc, string Icon);
+
+    private readonly ThemeOption[] TableThemes = new[]
+    {
+        new ThemeOption(TableTheme.ClassicGreen, "Zelený Filc", "Klasické kasíno s dreveným mantinelom", "🌲"),
+        new ThemeOption(TableTheme.RoyalBurgundy, "Bordový Zamat", "Kráľovský VIP salónik so zlatým lemom", "🍷"),
+        new ThemeOption(TableTheme.WoodCabin, "Drevená Koliba", "Rustikálny drevený stôl s teplým krbom", "🪵"),
+        new ThemeOption(TableTheme.CyberNeon, "Cyberpunk Neón", "Holografický tmavomodrý neónový stôl", "🌌")
+    };

    private readonly DeckInfo[] AvailableDecks = new[]
    {
@@ -109,6 +109,7 @@
                          IsInteractive="@IsMyTurn"
                          IsPlayable="@isPlayable"
                          CustomClass="@selectedClass"
+                          CardIndex="@i"
                          OnCardClicked="HandleCardClick" />

                @if (isSelected)
@@ -1,5 +1,6 @@
@page "/"
@using Faraon.Core.AI
+@implements IDisposable
@inject FxService Fx
@inject IFaraonAI AI
@inject IJSRuntime JS
@@ -10,7 +11,7 @@
 }
 else
 {
-    <div id="game-table-container">
+    <div id="game-table-container" class="theme-@Engine.State.Rules.TableTheme.ToString().ToLowerInvariant()">
        <!-- Canvas pre časticové efekty (oheň, ľad, konfety) -->
        <canvas id="particle-canvas"></canvas>

@@ -27,6 +28,11 @@ else
                }
            </div>
            <div style="display: flex; align-items: center; gap: 8px;">
+                <!-- Prepínač témy stola -->
+                <button class="btn-header-action" @onclick="CycleTableTheme" title="Téma stola: @GetThemeName(Engine.State.Rules.TableTheme)">
+                    <span>@GetThemeIcon(Engine.State.Rules.TableTheme)</span>
+                </button>
+
                <!-- Rýchlosť hry -->
                <button class="btn-speed-control" @onclick="CycleSpeed" title="Zmeniť rýchlosť hry">
                    @GetSpeedButtonText(Engine.State.Rules.SpeedLevel)
@@ -45,6 +51,32 @@ else
            </div>
        </header>

+        <!-- Živý radar & Záznamník ťahov -->
+        <div class="game-log-radar @(IsLogRadarMinimized ? "minimized" : "")">
+            <button class="log-radar-toggle-btn" @onclick="() => IsLogRadarMinimized = !IsLogRadarMinimized" title="Záznamník ťahov">
+                <span>📜 Ťahy</span>
+                <span style="font-size: 0.65rem;">@(IsLogRadarMinimized ? "▼" : "▲")</span>
+            </button>
+            @if (!IsLogRadarMinimized && Engine.State.MoveLog.Count > 0)
+            {
+                <div class="log-radar-items-container">
+                    @foreach (var log in Engine.State.MoveLog.TakeLast(5).Reverse())
+                    {
+                        <div class="log-radar-item" style="border-left-color: @(log.AccentColor ?? "var(--gold)");">
+                            <span class="log-radar-icon">@log.Icon</span>
+                            <div class="log-radar-text">
+                                <div>@log.Text</div>
+                                @if (!string.IsNullOrEmpty(log.SubText))
+                                {
+                                    <div class="log-radar-sub">@log.SubText</div>
+                                }
+                            </div>
+                        </div>
+                    }
+                </div>
+            }
+        </div>
+
        <!-- Špeciálny banner kartového vtipu (AI Human Mode) -->
        @if (CurrentJoke != null)
        {
@@ -310,6 +342,7 @@ else
            <GameOverModal Players="@Engine.State.Players"
                           IsOlympicMode="@Engine.State.Rules.OlympicMode"
                           MatchWinner="@Engine.State.MatchWinner"
+                           Stats="@Engine.State.Stats"
                           OnPlayAgain="HandlePlayAgain"
                           OnBackToLobby="ReturnToLobby" />
        }
@@ -319,6 +352,7 @@ else
@code {
    private bool IsInLobby = true;
    private bool IsMuted = false;
+    private bool IsLogRadarMinimized = true;
    private GameEngine? Engine;
    private string LastEventMessage = "";
    private System.Threading.CancellationTokenSource? _aiCts;
@@ -376,7 +410,7 @@ else
    private void StartNewGame()
    {
        // Klony hráčov pre čistú hru
-        var gamePlayers = ConfiguredPlayers.Select(p => new Player(p.Name, p.Type, p.Avatar, p.Difficulty)).ToList();
+        var gamePlayers = ConfiguredPlayers.Select(p => new Player(p.Name, p.Type, p.Avatar, p.Difficulty, p.PersonalityId)).ToList();

        Engine = new GameEngine();
        Engine.OnGameEvent += HandleGameEvent;
@@ -1024,6 +1058,11 @@ else
        player.CurrentEmotion = emotion;
        StateHasChanged();

+        if (player.Type == PlayerType.AI && !string.IsNullOrEmpty(player.PersonalityId))
+        {
+            _ = Fx.PlayBotSfxAsync(player.PersonalityId, emotion.ToString().ToLowerInvariant());
+        }
+
        if (emotion != PlayerEmotion.Neutral && emotion != PlayerEmotion.Celebrating)
        {
            _ = Task.Run(async () =>
@@ -1038,6 +1077,38 @@ else
        }
    }

+    private void CycleTableTheme()
+    {
+        if (Engine == null) return;
+        Engine.State.Rules.TableTheme = Engine.State.Rules.TableTheme switch
+        {
+            TableTheme.ClassicGreen => TableTheme.RoyalBurgundy,
+            TableTheme.RoyalBurgundy => TableTheme.WoodCabin,
+            TableTheme.WoodCabin => TableTheme.CyberNeon,
+            TableTheme.CyberNeon => TableTheme.ClassicGreen,
+            _ => TableTheme.ClassicGreen
+        };
+        StateHasChanged();
+    }
+
+    private string GetThemeName(TableTheme theme) => theme switch
+    {
+        TableTheme.ClassicGreen => "Zelené plátno",
+        TableTheme.RoyalBurgundy => "Kráľovský bord",
+        TableTheme.WoodCabin => "Drevený zrub",
+        TableTheme.CyberNeon => "Cyberpunk neón",
+        _ => "Zelené plátno"
+    };
+
+    private string GetThemeIcon(TableTheme theme) => theme switch
+    {
+        TableTheme.ClassicGreen => "🍀",
+        TableTheme.RoyalBurgundy => "👑",
+        TableTheme.WoodCabin => "🪵",
+        TableTheme.CyberNeon => "⚡",
+        _ => "🍀"
+    };
+
    private IEnumerable<(Player Player, string PositionClass)> GetOpponents()
    {
        if (Engine == null) return Enumerable.Empty<(Player, string)>();
@@ -1132,6 +1203,7 @@ else
    {
        PlayerThoughts.Clear();
        CurrentJoke = null;
+        IsLogRadarMinimized = true;
        StartNewGame();
    }

@@ -1140,7 +1212,14 @@ else
        _aiCts?.Cancel();
        PlayerThoughts.Clear();
        CurrentJoke = null;
+        IsLogRadarMinimized = true;
        IsInLobby = true;
        Engine = null;
    }
+
+    public void Dispose()
+    {
+        _aiCts?.Cancel();
+        _aiCts?.Dispose();
+    }
 }
@@ -198,6 +198,16 @@ public class FxService
        try { await _js.InvokeVoidAsync("FaraonFx.triggerDopamineBanner", title, subtitle, type); } catch { }
    }

+    public async ValueTask PlayCardWhooshAsync()
+    {
+        try { await _js.InvokeVoidAsync("FaraonFx.playCardWhoosh"); } catch { }
+    }
+
+    public async ValueTask PlayBotSfxAsync(string? personalityId, string? emotion = null)
+    {
+        try { await _js.InvokeVoidAsync("FaraonFx.playBotPersonalitySfx", personalityId, emotion); } catch { }
+    }
+
    public async ValueTask<bool> ToggleMuteAsync()
    {
        try { return await _js.InvokeAsync<bool>("FaraonFx.toggleMute"); } catch { return false; }
@@ -2501,4 +2501,295 @@ body, html {
@keyframes fadeIn {
    from { opacity: 0; transform: scale(0.95); }
    to { opacity: 1; transform: scale(1); }
+}
+
+/* --- 1. TABLE THEMES --- */
+#game-table-container.theme-classicgreen,
+#game-table-container.theme-classic-green {
+    background: radial-gradient(ellipse at center, #144933 0%, #0b2b1d 60%, #04120c 100%) !important;
+}
+#game-table-container.theme-classicgreen .poker-table-surface,
+#game-table-container.theme-classic-green .poker-table-surface {
+    border-color: #5a3818 !important;
+    background: radial-gradient(ellipse at center, #1e5c42 0%, #13422e 65%, #0d2e20 100%) !important;
+    box-shadow: inset 0 0 60px rgba(0, 0, 0, 0.8), 0 0 30px rgba(0, 0, 0, 0.9) !important;
+}
+
+#game-table-container.theme-royalburgundy,
+#game-table-container.theme-royal-burgundy {
+    background: radial-gradient(ellipse at center, #420d18 0%, #24050b 60%, #0c0103 100%) !important;
+}
+#game-table-container.theme-royalburgundy .poker-table-surface,
+#game-table-container.theme-royal-burgundy .poker-table-surface {
+    border-color: #8c6227 !important;
+    background: radial-gradient(ellipse at center, #5c1422 0%, #3d0a14 65%, #200409 100%) !important;
+    box-shadow: inset 0 0 65px rgba(0, 0, 0, 0.85), 0 0 35px rgba(236, 72, 153, 0.25) !important;
+}
+
+#game-table-container.theme-woodcabin,
+#game-table-container.theme-wood-cabin {
+    background: radial-gradient(ellipse at center, #2e1d10 0%, #1a0f08 60%, #080402 100%) !important;
+}
+#game-table-container.theme-woodcabin .poker-table-surface,
+#game-table-container.theme-wood-cabin .poker-table-surface {
+    border-color: #3e2723 !important;
+    background: radial-gradient(ellipse at center, #3d2817 0%, #291a0e 65%, #180f07 100%) !important;
+    box-shadow: inset 0 0 70px rgba(0, 0, 0, 0.9), 0 0 30px rgba(245, 158, 11, 0.2) !important;
+}
+
+#game-table-container.theme-cyberneon,
+#game-table-container.theme-cyber-neon {
+    background: radial-gradient(ellipse at center, #0a1f30 0%, #050d14 60%, #010408 100%) !important;
+}
+#game-table-container.theme-cyberneon .poker-table-surface,
+#game-table-container.theme-cyber-neon .poker-table-surface {
+    border-color: #00e5ff !important;
+    background: radial-gradient(ellipse at center, #0e2a40 0%, #081724 65%, #03080d 100%) !important;
+    box-shadow: inset 0 0 60px rgba(0, 229, 255, 0.25), 0 0 40px rgba(0, 229, 255, 0.35) !important;
+}
+
+/* --- MOVE HISTORY RADAR (ŽIVÝ ZÁZNAMNÍK ŤAHOV) --- */
+.game-log-radar {
+    position: absolute;
+    top: 55px;
+    left: 14px;
+    z-index: 80;
+    max-width: 280px;
+    width: 260px;
+    pointer-events: auto;
+    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
+}
+
+.game-log-radar.minimized {
+    width: auto;
+    max-width: 48px;
+}
+
+.log-radar-toggle-btn {
+    display: inline-flex;
+    align-items: center;
+    gap: 6px;
+    background: rgba(10, 25, 20, 0.85);
+    border: 1px solid rgba(245, 176, 65, 0.45);
+    color: var(--gold);
+    font-size: 0.76rem;
+    font-weight: 800;
+    padding: 4px 10px;
+    border-radius: 14px;
+    cursor: pointer;
+    backdrop-filter: blur(8px);
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.6);
+    margin-bottom: 6px;
+    transition: all 0.2s ease;
+    user-select: none;
+}
+
+.log-radar-toggle-btn:hover {
+    background: rgba(245, 176, 65, 0.25);
+    border-color: var(--gold);
+    transform: scale(1.05);
+}
+
+.log-radar-items-container {
+    display: flex;
+    flex-direction: column;
+    gap: 5px;
+    background: rgba(8, 16, 12, 0.92);
+    border: 1px solid rgba(245, 176, 65, 0.3);
+    border-radius: 14px;
+    padding: 8px 10px;
+    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.85), inset 0 0 15px rgba(245, 176, 65, 0.08);
+    backdrop-filter: blur(10px);
+    max-height: 220px;
+    overflow-y: auto;
+}
+
+.log-radar-item {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    font-size: 0.78rem;
+    color: #f1f5f9;
+    padding: 5px 8px;
+    border-radius: 8px;
+    background: rgba(255, 255, 255, 0.05);
+    border-left: 3px solid var(--gold);
+    animation: radar-item-in 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
+}
+
+@keyframes radar-item-in {
+    0% { transform: translateX(-15px); opacity: 0; }
+    100% { transform: translateX(0); opacity: 1; }
+}
+
+.log-radar-icon {
+    font-size: 1rem;
+    flex-shrink: 0;
+}
+
+.log-radar-text {
+    flex: 1;
+    line-height: 1.25;
+    font-weight: 600;
+}
+
+.log-radar-sub {
+    font-size: 0.68rem;
+    opacity: 0.85;
+    color: var(--gold);
+}
+
+/* --- 4. 3D VICTORY PODIUM & MATCH STATS MODAL --- */
+.match-summary-backdrop {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: rgba(0, 0, 0, 0.88);
+    backdrop-filter: blur(14px);
+    z-index: 500;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 16px;
+    animation: fadeIn 0.35s ease;
+}
+
+.match-summary-card {
+    background: linear-gradient(135deg, rgba(20, 15, 35, 0.98) 0%, rgba(10, 25, 20, 0.98) 50%, rgba(30, 15, 10, 0.98) 100%);
+    border: 2px solid #ffd700;
+    border-radius: 28px;
+    box-shadow: 0 0 60px rgba(255, 215, 0, 0.45), 0 20px 50px rgba(0, 0, 0, 0.95);
+    max-width: 650px;
+    width: 100%;
+    padding: 24px 28px;
+    color: #ffffff;
+    text-align: center;
+    position: relative;
+    max-height: 90vh;
+    overflow-y: auto;
+}
+
+.podium-container {
+    display: flex;
+    align-items: flex-end;
+    justify-content: center;
+    gap: 14px;
+    margin: 18px 0 22px;
+    min-height: 180px;
+}
+
+.podium-column {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    flex: 1;
+    max-width: 130px;
+}
+
+.podium-avatar-box {
+    margin-bottom: 8px;
+    position: relative;
+}
+
+.podium-avatar {
+    font-size: 2.8rem;
+    filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.8));
+    animation: podium-bounce 1.5s infinite alternate ease-in-out;
+}
+
+.podium-crown {
+    position: absolute;
+    top: -16px;
+    left: 50%;
+    transform: translateX(-50%);
+    font-size: 1.5rem;
+    animation: float 2s infinite ease-in-out alternate;
+}
+
+.podium-name {
+    font-size: 0.88rem;
+    font-weight: 800;
+    color: #ffffff;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    max-width: 120px;
+    margin-bottom: 6px;
+}
+
+.podium-step {
+    width: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-family: 'Cinzel', serif;
+    font-size: 1.8rem;
+    font-weight: 900;
+    border-radius: 12px 12px 0 0;
+    box-shadow: inset 0 2px 6px rgba(255, 255, 255, 0.3), 0 10px 20px rgba(0, 0, 0, 0.6);
+}
+
+.step-gold {
+    height: 110px;
+    background: linear-gradient(180deg, #ffd700 0%, #b8860b 100%);
+    color: #1a1a1a;
+    border: 2px solid #fff;
+    box-shadow: 0 0 25px rgba(255, 215, 0, 0.6);
+}
+
+.step-silver {
+    height: 80px;
+    background: linear-gradient(180deg, #e2e8f0 0%, #94a3b8 100%);
+    color: #0f172a;
+    border: 2px solid #f8fafc;
+}
+
+.step-bronze {
+    height: 60px;
+    background: linear-gradient(180deg, #cd7f32 0%, #8b4513 100%);
+    color: #ffffff;
+    border: 2px solid #d97706;
+}
+
+@keyframes podium-bounce {
+    0% { transform: translateY(0); }
+    100% { transform: translateY(-8px); }
+}
+
+.match-stats-grid {
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
+    gap: 10px;
+    margin-bottom: 22px;
+}
+
+.stat-badge-box {
+    background: rgba(255, 255, 255, 0.05);
+    border: 1px solid rgba(245, 176, 65, 0.25);
+    border-radius: 14px;
+    padding: 10px 14px;
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    text-align: left;
+}
+
+.stat-badge-icon {
+    font-size: 1.6rem;
+}
+
+.stat-badge-title {
+    font-size: 0.72rem;
+    color: #94a3b8;
+    text-transform: uppercase;
+    font-weight: 700;
+    letter-spacing: 0.5px;
+}
+
+.stat-badge-value {
+    font-size: 0.98rem;
+    font-weight: 800;
+    color: var(--gold);
 }
@@ -39,6 +39,17 @@ window.FaraonFx = (function () {
        return audioCtx;
    }

+    // Automatické prebudenie AudioContextu pri prvom kliknutí používateľa kdekoľvek
+    if (typeof window !== 'undefined') {
+        const unlockAudio = () => {
+            getAudioContext();
+            window.removeEventListener('pointerdown', unlockAudio);
+            window.removeEventListener('keydown', unlockAudio);
+        };
+        window.addEventListener('pointerdown', unlockAudio, { passive: true });
+        window.addEventListener('keydown', unlockAudio, { passive: true });
+    }
+
    // --- PROCEDURAL SOUND GENERATORS ---
    function playCardSnap() {
        if (isMuted) return;
@@ -386,6 +397,182 @@ window.FaraonFx = (function () {
        });
    }

+    function playCardWhoosh() {
+        if (isMuted) return;
+        const ctx = getAudioContext();
+        if (!ctx) return;
+        const now = ctx.currentTime;
+        const bufferSize = Math.floor(ctx.sampleRate * 0.22);
+        const buffer = ctx.createBuffer(1, bufferSize, ctx.sampleRate);
+        const data = buffer.getChannelData(0);
+        for (let i = 0; i < bufferSize; i++) {
+            data[i] = (Math.random() * 2 - 1) * Math.sin((i / bufferSize) * Math.PI);
+        }
+        const noise = ctx.createBufferSource();
+        noise.buffer = buffer;
+        const filter = ctx.createBiquadFilter();
+        filter.type = 'bandpass';
+        filter.frequency.setValueAtTime(450, now);
+        filter.frequency.exponentialRampToValueAtTime(1200, now + 0.1);
+        filter.frequency.exponentialRampToValueAtTime(350, now + 0.22);
+        filter.Q.value = 2.5;
+
+        const gain = ctx.createGain();
+        gain.gain.setValueAtTime(0.3, now);
+        gain.gain.exponentialRampToValueAtTime(0.001, now + 0.22);
+
+        noise.connect(filter);
+        filter.connect(gain);
+        gain.connect(ctx.destination);
+        noise.start(now);
+    }
+
+    function playBotPersonalitySfx(personalityId, emotion) {
+        if (isMuted) return;
+        const ctx = getAudioContext();
+        if (!ctx) return;
+        const now = ctx.currentTime;
+        const pId = (personalityId || 'fox').toLowerCase();
+        const emo = (emotion || 'thinking').toLowerCase();
+
+        // Mierny posun tóniny podľa emócie
+        let pitchMul = 1.0;
+        if (emo === 'shocked' || emo === 'desperate') pitchMul = 0.82;
+        else if (emo === 'confident' || emo === 'celebrating') pitchMul = 1.22;
+        else if (emo === 'freezing') pitchMul = 1.45;
+        else if (emo === 'angry') pitchMul = 0.92;
+
+        switch (pId) {
+            case 'fox': { // Lišiak Filip - sly playful rising arpeggio
+                const baseFreqs = [440, 554.37, 659.25, 880];
+                baseFreqs.forEach((freq, i) => {
+                    const osc = ctx.createOscillator();
+                    const gain = ctx.createGain();
+                    const t = now + i * 0.045;
+                    osc.type = 'triangle';
+                    osc.frequency.setValueAtTime(freq * pitchMul, t);
+                    gain.gain.setValueAtTime(0.28, t);
+                    gain.gain.exponentialRampToValueAtTime(0.001, t + 0.18);
+                    osc.connect(gain);
+                    gain.connect(ctx.destination);
+                    osc.start(t);
+                    osc.stop(t + 0.19);
+                });
+                break;
+            }
+            case 'queen': { // Kráľovná Alžbeta - regal royal chime / bell chords
+                const baseFreqs = [523.25, 659.25, 783.99, 1046.50];
+                baseFreqs.forEach((freq, i) => {
+                    const osc = ctx.createOscillator();
+                    const gain = ctx.createGain();
+                    const t = now + i * 0.055;
+                    osc.type = 'sine';
+                    osc.frequency.setValueAtTime(freq * pitchMul, t);
+                    gain.gain.setValueAtTime(0.32, t);
+                    gain.gain.exponentialRampToValueAtTime(0.001, t + 0.42);
+                    osc.connect(gain);
+                    gain.connect(ctx.destination);
+                    osc.start(t);
+                    osc.stop(t + 0.43);
+                });
+                break;
+            }
+            case 'robot': { // Kyber-Robo - 8-bit digital synth crunch
+                const tones = [880, 1320, 660, 1760];
+                tones.forEach((freq, i) => {
+                    const osc = ctx.createOscillator();
+                    const gain = ctx.createGain();
+                    const t = now + i * 0.04;
+                    osc.type = 'square';
+                    osc.frequency.setValueAtTime(freq * pitchMul, t);
+                    gain.gain.setValueAtTime(0.22, t);
+                    gain.gain.exponentialRampToValueAtTime(0.001, t + 0.06);
+                    osc.connect(gain);
+                    gain.connect(ctx.destination);
+                    osc.start(t);
+                    osc.stop(t + 0.065);
+                });
+                break;
+            }
+            case 'grandpa': { // Dedo Jozef - warm vintage harmonic bell
+                const osc = ctx.createOscillator();
+                const gain = ctx.createGain();
+                osc.type = 'sine';
+                osc.frequency.setValueAtTime(987.77 * pitchMul, now);
+                gain.gain.setValueAtTime(0.35, now);
+                gain.gain.exponentialRampToValueAtTime(0.001, now + 0.55);
+                osc.connect(gain);
+                gain.connect(ctx.destination);
+                osc.start(now);
+                osc.stop(now + 0.56);
+                break;
+            }
+            case 'cyberkid': { // Hacker Miško - futuristic laser zap
+                const osc = ctx.createOscillator();
+                const gain = ctx.createGain();
+                osc.type = 'sawtooth';
+                osc.frequency.setValueAtTime(1500 * pitchMul, now);
+                osc.frequency.exponentialRampToValueAtTime(180 * pitchMul, now + 0.18);
+                gain.gain.setValueAtTime(0.3, now);
+                gain.gain.exponentialRampToValueAtTime(0.001, now + 0.18);
+                osc.connect(gain);
+                gain.connect(ctx.destination);
+                osc.start(now);
+                osc.stop(now + 0.19);
+                break;
+            }
+            case 'cat': { // Mačka Minda - playful synth meow
+                const osc = ctx.createOscillator();
+                const gain = ctx.createGain();
+                osc.type = 'sine';
+                osc.frequency.setValueAtTime(580 * pitchMul, now);
+                osc.frequency.exponentialRampToValueAtTime(980 * pitchMul, now + 0.11);
+                osc.frequency.exponentialRampToValueAtTime(680 * pitchMul, now + 0.28);
+                gain.gain.setValueAtTime(0.32, now);
+                gain.gain.exponentialRampToValueAtTime(0.001, now + 0.30);
+                osc.connect(gain);
+                gain.connect(ctx.destination);
+                osc.start(now);
+                osc.stop(now + 0.31);
+                break;
+            }
+            case 'wizard': { // Čarodejník Baltazár - mystical shimmering chord
+                [392.00, 587.33, 880.00, 1174.66].forEach((freq, i) => {
+                    const osc = ctx.createOscillator();
+                    const gain = ctx.createGain();
+                    const t = now + i * 0.035;
+                    osc.type = 'sine';
+                    osc.frequency.setValueAtTime(freq * pitchMul, t);
+                    gain.gain.setValueAtTime(0.24, t);
+                    gain.gain.exponentialRampToValueAtTime(0.001, t + 0.45);
+                    osc.connect(gain);
+                    gain.connect(ctx.destination);
+                    osc.start(t);
+                    osc.stop(t + 0.46);
+                });
+                break;
+            }
+            case 'bear': { // Medveď Mišo - deep bass growl thud
+                const osc = ctx.createOscillator();
+                const gain = ctx.createGain();
+                osc.type = 'sawtooth';
+                osc.frequency.setValueAtTime(95 * pitchMul, now);
+                osc.frequency.exponentialRampToValueAtTime(38 * pitchMul, now + 0.35);
+                gain.gain.setValueAtTime(0.42, now);
+                gain.gain.exponentialRampToValueAtTime(0.001, now + 0.35);
+                osc.connect(gain);
+                gain.connect(ctx.destination);
+                osc.start(now);
+                osc.stop(now + 0.36);
+                break;
+            }
+            default: {
+                playCardSnap();
+                break;
+            }
+        }
+    }
+
    // --- SCREEN SHAKE ---
    function triggerScreenShake(intensity = 5) {
        const board = document.getElementById('game-table-container');
@@ -1197,6 +1384,8 @@ window.FaraonFx = (function () {
        animateCardPlay,
        animateCardDraw,
        animateTurnTransition,
+        playCardWhoosh,
+        playBotPersonalitySfx,
        setSpeedLevel,
        toggleMute
    };