first commit

README.md

@@ -0,0 +1,2 @@
+# Diplomova praca - Speech Therapy Game
+

config/worlds.js

@@ -0,0 +1,282 @@
+/**
+ * Konfigurácia svetov pre logopedickú hru
+ * Každý svet reprezentuje jedno písmeno/hlásku na precvičovanie
+ * 
+ * Štruktúra sveta:
+ * - id: jedinečný identifikátor sveta
+ * - name: názov sveta (písmeno/hláska)
+ * - title: popisný názov sveta
+ * - description: krátky popis sveta
+ * - color: hlavná farba sveta (pre UI)
+ * - icon: ikona sveta (cesta k obrázku)
+ * - difficulty: obtiažnosť (1-5, kde 5 je najťažšia)
+ * - unlockRequirement: podmienka na odomknutie sveta
+ * - totalLevels: celkový počet levelov v svete
+ * - gameTypes: typy hier dostupné v tomto svete
+ */
+
+const WORLDS_CONFIG = [
+    {
+        id: 'world_r',
+        name: 'R',
+        title: 'R',
+        description: 'Precvičuj výslovnosť písmena R s rôznymi slovami',
+        color: '#FF6B6B', 
+        icon: 'images/worlds/world_r.png',
+        difficulty: 4,
+        unlockRequirement: null, 
+        totalLevels: 16,
+        gameTypes: ['banik', 'pexeso', 'mario'],
+        isUnlocked: true 
+    },
+    {
+        id: 'world_l',
+        name: 'L',
+        title: 'Svet písmena L',
+        description: 'Nauč sa správne vyslovovať písmeno L',
+        color: '#4ECDC4', 
+        icon: 'images/worlds/world_l.png',
+        difficulty: 4,
+        unlockRequirement: null,
+        totalLevels: 16,
+        gameTypes: ['banik', 'pexeso', 'mario'],
+        isUnlocked: true
+    },
+    {
+        id: 'world_c',
+        name: 'C',
+        title: 'Svet písmena C',
+        description: 'Precvičuj ostré písmeno C',
+        color: '#FFEAA7',
+        icon: 'images/worlds/world_c.png',
+        difficulty: 3,
+        unlockRequirement: null,
+        /*unlockRequirement: {
+            worldId: 'world_z',
+            minStars: 22
+        },*/
+        totalLevels: 16,
+        gameTypes: ['banik', 'pexeso', 'mario'],
+        isUnlocked: true
+    },
+    {
+        id: 'world_z',
+        name: 'Z',
+        title: 'Svet písmena Z',
+        description: 'Zvládni buzivé písmeno Z',
+        color: '#96CEB4', 
+        icon: 'images/worlds/world_z.png',
+        difficulty: 3,
+        /*unlockRequirement: {
+            worldId: 'world_s',
+            minStars: 20
+        },*/
+        unlockRequirement: null,
+        totalLevels: 16,
+        gameTypes: ['banik', 'pexeso', 'mario'],
+        isUnlocked: true
+    },
+    {
+        id: 'world_s',
+        name: 'S',
+        title: 'Svet písmena S',
+        description: 'Precvičuj sykavky s písmenom S',
+        color: '#45B7D1', 
+        icon: 'images/worlds/world_s.png',
+        difficulty: 3,
+        unlockRequirement: null,
+        totalLevels: 16,
+        gameTypes: ['banik', 'pexeso', 'mario'],
+        isUnlocked: true
+    },
+    {
+        id: 'world_ch',
+        name: 'Č',
+        title: 'Svet písmena Č',
+        description: 'Čvachtaj s písmenom Č',
+        color: '#74B9FF', 
+        icon: 'images/worlds/world_ch.png',
+        difficulty: 4,
+        unlockRequirement: null,
+        totalLevels: 16,
+        gameTypes: ['banik', 'pexeso', 'mario'],
+        isUnlocked: true
+    },
+    {
+        id: 'world_zh',
+        name: 'Ž',
+        title: 'Svet písmena Ž',
+        description: 'Žuži s písmenom Ž',
+        color: '#FF9FF3', 
+        icon: 'images/worlds/world_zh.png',
+        difficulty: 4,
+        unlockRequirement: null,
+        totalLevels: 16,
+        gameTypes: ['banik', 'pexeso', 'mario'],
+        isUnlocked: true
+    },
+    {
+        id: 'world_sh',
+        name: 'Š',
+        title: 'Svet písmena Š',
+        description: 'Šušti s písmenom Š',
+        color: '#DDA0DD', 
+        icon: 'images/worlds/world_sh.png',
+        difficulty: 4,
+        unlockRequirement: null,
+        totalLevels: 16,
+        gameTypes: ['banik', 'pexeso', 'mario'],
+        isUnlocked: true
+    },
+    {
+        id: 'world_k',
+        name: 'K',
+        title: 'Svet písmena K',
+        description: 'Klopkaj s písmenom K',
+        color: '#00B894', 
+        icon: 'images/worlds/world_k.png',
+        difficulty: 2,
+        unlockRequirement: null,
+        totalLevels: 16,
+        gameTypes: ['banik', 'pexeso', 'mario'],
+        isUnlocked: true
+    },
+    {
+        id: 'world_g',
+        name: 'G',
+        title: 'Svet písmena G',
+        description: 'Grgaj s písmenom G',
+        color: '#E84393', 
+        icon: 'images/worlds/world_g.png',
+        difficulty: 2,
+        unlockRequirement: null,
+        totalLevels: 16,
+        gameTypes: ['banik', 'pexeso', 'mario'],
+        isUnlocked: true
+    },
+    {
+        id: 'world_d',
+        name: 'D',
+        title: 'Svet písmena D',
+        description: 'Dumaj s D',
+        color: '#5c1f34', 
+        icon: 'images/worlds/world_d.png',
+        difficulty: 2,
+        unlockRequirement: null,
+        totalLevels: 16,
+        gameTypes: ['banik', 'pexeso', 'mario'],
+        isUnlocked: true
+    },
+    {
+        id: 'world_t',
+        name: 'T',
+        title: 'Svet písmena T',
+        description: 'Tipuj s T',
+        color: '#e4970a', 
+        icon: 'images/worlds/world_t.png',
+        difficulty: 2,
+        unlockRequirement: null,
+        totalLevels: 16,
+        gameTypes: ['banik', 'pexeso', 'mario'],
+        isUnlocked: true
+    },
+    {
+        id: 'world_n',
+        name: 'N',
+        title: 'Svet písmena N',
+        description: 'Nafkaj s N',
+        color: '#3628fa', 
+        icon: 'images/worlds/world_n.png',
+        difficulty: 2,
+        unlockRequirement: null,
+        totalLevels: 16,
+        gameTypes: ['banik', 'pexeso', 'mario'],
+        isUnlocked: true
+    },
+    {
+        id: 'world_dh',
+        name: 'Ď',
+        title: 'Svet písmena Ď',
+        description: 'Ďabaj s mäkkým písmenom Ď',
+        color: '#FD79A8', // tmavoružová
+        icon: 'images/worlds/world_dh.png',
+        difficulty: 3,
+        unlockRequirement: null,
+        totalLevels: 16,
+        gameTypes: ['banik', 'pexeso', 'mario'],
+        isUnlocked: true
+    },
+    {
+        id: 'world_th',
+        name: 'Ť',
+        title: 'Svet písmena Ť',
+        description: 'Ťukaj s mäkkým písmenom Ť',
+        color: '#FDCB6E', // oranžová
+        icon: 'images/worlds/world_th.png',
+        difficulty: 3,
+        unlockRequirement: null,
+        totalLevels: 16,
+        gameTypes: ['banik', 'pexeso', 'mario'],
+        isUnlocked: true
+    },
+    {
+        id: 'world_nh',
+        name: 'Ň',
+        title: 'Svet písmena Ň',
+        description: 'Ňafaj s mäkkým písmenom Ň',
+        color: '#A29BFE',
+        icon: 'images/worlds/world_nh.png',
+        difficulty: 3,
+        unlockRequirement: null,
+        totalLevels: 16,
+        gameTypes: ['banik', 'pexeso', 'mario'],
+        isUnlocked: true
+    }
+    
+];
+
+/**
+ * Funkcia na získanie konfigurácie konkrétneho sveta
+ * @param {string} worldId - ID sveta
+ * @returns {Object|null} - konfigurácia sveta alebo null ak sa nenašiel
+ */
+function getWorldConfig(worldId) {
+    return WORLDS_CONFIG.find(world => world.id === worldId) || null;
+}
+
+/**
+ * Funkcia na získanie všetkých svetov
+ * @returns {Array} - pole všetkých svetov
+ */
+function getAllWorlds() {
+    return WORLDS_CONFIG;
+}
+
+/**
+ * Funkcia na získanie odomknutých svetov
+ * @returns {Array} - pole odomknutých svetov
+ */
+function getUnlockedWorlds() {
+    return WORLDS_CONFIG.filter(world => world.isUnlocked);
+}
+
+/**
+ * Funkcia na kontrolu, či je svet odomknutý
+ * @param {string} worldId - ID sveta
+ * @returns {boolean} - true ak je svet odomknutý
+ */
+function isWorldUnlocked(worldId) {
+    const world = getWorldConfig(worldId);
+    return world ? world.isUnlocked : false;
+}
+
+// Export pre použitie v iných súboroch
+if (typeof module !== 'undefined' && module.exports) {
+    module.exports = {
+        WORLDS_CONFIG,
+        getWorldConfig,
+        getAllWorlds,
+        getUnlockedWorlds,
+        isWorldUnlocked
+    };
+}

css/pexeso-menu.css

@@ -0,0 +1,308 @@
+
+.back-button {
+    position: absolute;
+    top: 20px;
+    left: 20px;
+    text-decoration: none;
+    font-size: 24px;
+    color: black;
+}
+
+.nadpis {
+    font-size: clamp(36px, 5vw, 48px);
+    font-weight: bold;
+    color: white;
+    text-shadow: 0 4px 6px rgba(0,0,0,0.3);
+    margin-bottom: clamp(20px, 4vh, 40px);
+    text-align: center;
+}
+
+.buttons-container {
+    display: flex;
+    gap: clamp(5px, 1vw, 30px);
+    flex-wrap: wrap;
+    justify-content: center;
+    width: 100%;
+    max-width: 1400px;
+    padding: 0 clamp(10px, 2vw, 20px);
+}
+
+.square-button {
+    flex: 0 1 calc(20% - clamp(15px, 3vw, 30px));
+    aspect-ratio: 1/1;
+    min-width: 200px;
+    max-width: 300px;
+    background-size: cover;
+    background-position: center;
+    background-repeat: no-repeat;
+    border: none;
+    cursor: pointer;
+    font-size: clamp(10px, 1.5vw, 12px);
+    font-weight: bold;
+    color: white;
+    text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: all 0.3s ease;
+    position: relative;
+    overflow: hidden;
+    box-shadow: 0 10px 20px rgba(0,0,0,0.2);
+    margin: clamp(10px, 2vw, 15px);
+}
+
+.square-button::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: rgba(0,0,0,0.3);
+    opacity: 0;
+    transition: opacity 0.3s ease;
+}
+
+.square-button:hover {
+    transform: translateY(-10px);
+    box-shadow: 0 15px 25px rgba(0,0,0,0.3);
+}
+
+.square-button:hover::before {
+    opacity: 1;
+}
+
+.square-button[data-letter="Š"] {
+    background-image: url('../images/pexeso-Š.png');
+}
+
+.square-button[data-letter="S"] {
+    background-image: url('../images/pexeso-S.png');
+}
+
+.square-button[data-letter="R"] {
+    background-image: url('../images/pexeso-R.png');
+}
+
+
+.square-button[data-letter="Custom"] {
+    background-image: url('../images/pexeso-custom.png');
+}
+
+
+
+
+.player-setup {
+    background: rgba(218, 218, 218, 0.5);
+    padding: 20px;
+    border-radius: 10px;
+  }
+
+  .player-setup input {
+    margin: 0 1% 1% 0%;
+    padding: 1% 1% 1% 1%;
+    width: 46%;
+    border: 1px solid #ddd;
+    border-radius: 5px;
+  }
+
+
+
+#customLevelModal {
+    position: fixed;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    background: rgba(255,255,255,0.9);
+    backdrop-filter: blur(10px);
+    padding: 40px;
+    border-radius: 20px;
+    box-shadow: 0 15px 30px rgba(0,0,0,0.2);
+    display: none;
+    flex-direction: column;
+    gap: 20px;
+    max-width: 800px;
+    width: 90%;
+    max-height: 90vh;
+    z-index: 1000;
+}
+
+.word-list {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
+    gap: 15px;
+    max-height: 500px;
+    overflow-y: auto;
+    padding: 20px;
+    background: rgba(218, 218, 218, 0.5);
+    border-radius: 15px;
+}
+
+.word-item {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    padding: 10px;
+    background-color: white;
+    border-radius: 10px;
+    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
+    transition: transform 0.2s ease;
+}
+
+.word-item:hover {
+    transform: scale(1.05);
+}
+
+.word-item img {
+    max-width: 50px;
+    max-height: 50px;
+    border-radius: 5px;
+}
+
+
+#customLevelModal button {
+    padding: 12px 24px;
+    background-color: rgba(240,240,240,0.5); /* Stejná barva jako pozadí word listu */
+    color: #333; /* Barva textu podobná word listu */
+    border: none;
+    border-radius: 10px;
+    cursor: pointer;
+    transition: background-color 0.3s ease, transform 0.2s ease;
+    font-family: 'MPLUSRounded1c-Medium', sans-serif;
+    font-weight: bold;
+}
+
+
+#customLevelModal button:hover {
+    background-color: rgba(220,220,220,0.7); /* Lehce tmavší varianta pozadí */
+    transform: scale(1.05); /* Jemný efekt zvětšení při hover */
+}
+
+/* Specificky pro tlačítko "Začít hru" */
+#customLevelModal button {
+    background-color: white;
+}
+
+#customLevelModal button:first-of-type:hover {
+    background-color: rgba(220,220,220,0.7); /* Lehce tmavší varianta pozadí */
+}
+
+
+
+
+
+
+/* Média dotaz pro mobilní zařízení */
+@media screen and (max-width: 768px) {
+    body {
+        padding: 10px;
+        min-height: 100vh;
+        height: auto;
+        overflow-x: hidden;
+        overflow-y: auto;
+    }
+
+    .back-button {
+        top: 10px;
+        left: 10px;
+        font-size: 20px;
+    }
+
+    .nadpis {
+        font-size: 32px;
+        margin-bottom: 20px;
+    }
+
+    .buttons-container {
+        gap: 15px;
+        padding: 0 10px;
+    }
+
+    .square-button {
+        min-width: 150px;
+        min-height: 150px;
+        font-size: 10px;
+    }
+
+    #customLevelModal {
+        padding: 20px;
+        width: 95%;
+        max-height: 95vh;
+    }
+
+    .word-list {
+        grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
+        gap: 10px;
+        padding: 10px;
+        max-height: 400px;
+    }
+
+    .word-item {
+        padding: 5px;
+        gap: 5px;
+    }
+
+    .word-item img {
+        max-width: 40px;
+        max-height: 40px;
+    }
+
+    #customLevelModal button {
+        padding: 10px 20px;
+        font-size: 14px;
+    }
+}
+
+/* Pro velmi malé obrazovky */
+@media screen and (max-width: 480px) {
+    body {
+        padding: 5px;
+    }
+
+    .nadpis {
+        font-size: 28px;
+        margin-bottom: 15px;
+    }
+
+    .buttons-container {
+        gap: 10px;
+    }
+
+    .square-button {
+        min-width: 120px;
+        min-height: 120px;
+        font-size: 9px;
+    }
+
+    #customLevelModal {
+        padding: 15px;
+        width: 98%;
+    }
+
+    .word-list {
+        grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
+        gap: 5px;
+        max-height: 350px;
+    }
+
+    .word-item {
+        padding: 3px;
+    }
+
+    .word-item img {
+        max-width: 30px;
+        max-height: 30px;
+    }
+
+    #customLevelModal button {
+        padding: 8px 16px;
+        font-size: 12px;
+    }
+}
+
+@font-face {
+    font-family: 'MPLUSRounded1c-Black';
+    src: url('../fonts/MPLUSRounded1c-Black.ttf') format('truetype');
+    font-weight: normal;
+    font-style: normal;
+}

css/pexeso-old.css

@@ -0,0 +1,557 @@
+/* FONTY */
+@font-face {
+    font-family: 'MPLUSRounded1c-Black';
+    src: url('../fonts/MPLUSRounded1c-Black.ttf') format('truetype');
+    /* Možné ďalšie formáty fontov (woff, woff2, svg) a ich cesty by sa tiež mali uviesť */
+    font-weight: normal;
+    font-style: normal;
+  }
+  @font-face {
+    font-family: 'MPLUSRounded1c-Medium';
+    src: url('../fonts/MPLUSRounded1c-Medium.ttf') format('truetype');
+    /* Možné ďalšie formáty fontov (woff, woff2, svg) a ich cesty by sa tiež mali uviesť */
+    font-weight: normal;
+    font-style: normal;
+  }
+  @font-face {
+    font-family: 'MPLUSRounded1c-ExtraBold';
+    src: url('../fonts/MPLUSRounded1c-ExtraBold.ttf') format('truetype');
+    /* Možné ďalšie formáty fontov (woff, woff2, svg) a ich cesty by sa tiež mali uviesť */
+    font-weight: normal;
+    font-style: normal;
+  }
+  @font-face {
+    font-family: 'MPLUSRounded1c-Bold';
+    src: url('../fonts/MPLUSRounded1c-Bold.ttf') format('truetype');
+    /* Možné ďalšie formáty fontov (woff, woff2, svg) a ich cesty by sa tiež mali uviesť */
+    font-weight: normal;
+    font-style: normal;
+  }
+
+  body {
+    margin: 0;
+    padding: clamp(10px, 2vw, 20px);
+    min-height: 90vh;
+    display: flex;
+    flex-direction: column;
+    background-image: url('../images/pozadieg.jpg');
+    background-size: cover;
+    background-position: center;
+    font-family: 'MPLUSRounded1c-Medium', sans-serif;
+    overflow-x: hidden;
+}
+
+.game-container {
+    display: grid;
+    grid-template-columns: repeat(6, 1fr);
+    gap: 10px;
+    max-width: 900px;
+    margin: 20px auto;
+}
+
+
+/* koniec hry okno */
+
+.modal {
+    display: none;
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-color: rgba(0, 0, 0, 0.7);
+    z-index: 1000;
+    justify-content: center;
+    align-items: center;
+}
+
+.modal-content {
+    background-color: white;
+    padding: 2rem;
+    border-radius: 15px;
+    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+    text-align: center;
+    max-width: 500px;
+    width: 90%;
+    z-index: 1001; /* Vyšší než modal */
+    position: relative;
+}
+
+.modal h2 {
+    color: #2c3e50;
+    margin-bottom: 1.5rem;
+}
+
+.game-stats {
+    background-color: #f8f9fa;
+    padding: 1rem;
+    border-radius: 10px;
+    margin: 1.5rem 0;
+}
+
+.game-stats p {
+    margin: 0.5rem 0;
+    color: #2c3e50;
+}
+
+.modal-buttons {
+    display: flex;
+    justify-content: center;
+    gap: 1rem;
+    margin-top: 1.5rem;
+}
+
+.modal-button {
+    padding: 0.8rem 1.5rem;
+    border: none;
+    border-radius: 5px;
+    cursor: pointer;
+    font-size: 1rem;
+    transition: all 0.3s ease;
+}
+
+#restartGameBtn {
+    background-color: #4CAF50;
+    color: white;
+}
+
+#backToMenuBtn {
+    background-color: #2196F3;
+    color: white;
+}
+
+.modal-button:hover {
+    transform: translateY(-2px);
+    opacity: 0.9;
+}
+
+#winnerInfo {
+    margin: 1rem 0;
+    padding: 1rem;
+    background-color: #e8f5e9;
+    border-radius: 10px;
+}
+
+#winnerText {
+    color: #2e7d32;
+    margin: 0;
+}
+
+
+
+
+
+/* karty */
+
+.card {
+aspect-ratio: 1;
+background-image: url("../images/pexeso.png");
+background-size: cover;
+background-position: center;
+background-repeat: no-repeat;
+display: flex;
+flex-direction: column;
+align-items: center;
+justify-content: center;
+cursor: pointer;
+transition: transform 0.3s;
+position: relative;
+overflow: hidden;
+transform-style: preserve-3d;
+}
+
+.card.flipped {
+background-image: url("../images/hra.png"); 
+transform: rotateY(0);
+}
+
+.card img {
+max-width: 70%;
+max-height: 60%;
+position: absolute;
+top: 10%; /* Posun obrázku nahoru */
+backface-visibility: hidden;
+transform: rotateY(180deg);
+transition: transform 0.3s;
+}
+
+.card-word {
+font-size: 15px;
+position: absolute;
+bottom: 15px; /* Umístění textu dolů */
+left: 0;
+right: 0;
+text-align: center;
+color: white;
+text-shadow: 1px 1px 2px black;
+backface-visibility: hidden;
+transform: rotateY(180deg);
+transition: transform 0.3s;
+font-family: 'MPLUSRounded1c-Bold', sans-serif;
+
+}
+
+.card.flipped {
+transform: rotateY(0);
+}
+
+.card.flipped img,
+.card.flipped .card-word {
+transform: rotateY(0);
+}
+
+.stats {
+    text-align: center;
+    margin: 20px;
+    font-size: 1.2em;
+    color: white;
+}
+
+.back-button {
+    position: absolute;
+    top: 20px;
+    left: 20px;
+    text-decoration: none;
+    font-size: 24px;
+    color: black;
+}
+
+
+.mic-indicator {
+    width: 100%;
+    display: flex;
+    flex-direction: row; /* zmena na row pre horizontálne usporiadanie */
+    align-items: center; /* vertikálne zarovnanie na stred */
+    justify-content: center; /* horizontálne zarovnanie na stred */
+    gap: 10px; /* medzera medzi bodkou a tlačidlom */
+    margin: 10px 0;
+}
+
+.recording-status {
+    width: 15px;
+    height: 15px;
+    border-radius: 50%;
+    background-color: red;
+    animation: pulse 1s infinite;
+    display: none;
+}
+
+@keyframes pulse {
+    0% { transform: scale(1); opacity: 1; }
+    50% { transform: scale(1.2); opacity: 0.7; }
+    100% { transform: scale(1); opacity: 1; }
+}
+
+
+.players-container {
+    display: flex;
+    justify-content: center;
+    width: 100%;
+    margin-bottom: 20px;
+    margin-top: 20px;
+}
+
+.player-indicator {
+    background-color: #3a1304;
+    border: 3px double #96530f;
+    border-radius: 0px;
+    padding: 15px;
+    text-align: center;
+    min-width: 250px;
+    transition: all 0.3s ease;
+    margin: 0 10px;
+}
+
+.player-indicator .current-player {
+    font-size: 16px;
+    margin-bottom: 10px;
+}
+
+.player-indicator .player-name {
+    font-weight: bold;
+}
+
+.player-indicator .player-scores {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    font-size: 14px;
+}
+
+.player-indicator .player-scores div {
+    margin: 5px 0;
+}
+
+.player-indicator.active-player {
+    transform: scale(1.1);
+    border: 3px solid #1eff00;
+    box-shadow: 0 0 10px rgba(0,0,0,0.1);
+    background-size: 100% 100%;
+}
+
+
+
+
+
+
+
+
+
+/* Rozmazané pozadie */
+
+/* Pridáme wrapper pre hlavný obsah */
+.game-wrapper {
+    transition: filter 0.3s ease;
+}
+
+/* Keď je speech container aktívny, aplikujeme blur na wrapper */
+.blur-background .game-wrapper {
+    filter: blur(5px);
+    z-index: -1;
+}
+
+/* Obrázok slova */
+.match-text {
+    font-size: 1.2em;
+    position: relative;
+    color: white;
+    text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
+    margin: 5% auto 5% auto;
+    
+}
+
+/* Tlačidlo mikrofónu */
+#micButton {
+    padding: 10px 20px;
+    border-radius: 25px;
+    border: none;
+    cursor: pointer;
+    font-size: 1.2em;
+    background: linear-gradient(45deg, #ff6b6b, #4ecdc4); /* rozprávkové farby */
+    color: white;
+    transition: all 0.3s ease;
+}
+
+/* Neaktívny stav tlačidla */
+#micButton:not(.active) {
+    background: linear-gradient(45deg, #ff9a9e, #fad0c4);
+}
+
+/* Aktívny stav tlačidla */
+#micButton.active {
+    background: linear-gradient(45deg, #4facfe, #00f2fe);
+}
+
+/* Text pre zostávajúce pokusy */
+.attempts-left {
+    margin-top: 15px;
+    color: #838383;
+    font-size: 0.9em;
+}
+
+.word-image {
+    max-width: 100px; 
+    max-height: 100px;
+    height: auto;
+    margin: 2% auto 2% auto;
+    display: block;
+}
+
+.speech-container {
+    position: fixed;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    background-color: #3a1304;
+    border: 3px solid #96530f;
+    padding: 20px;
+    text-align: center;
+    display: none;
+    z-index: 1000;
+    flex-direction: column;
+    align-items: center;
+    min-width: 300px; /* zabezpečí minimálnu šírku pre obsah */
+    filter: blur(0px);
+}
+
+.feedback-image {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    width: 300px;
+    height: auto;
+    z-index: 1001; /* aby bol nad rozmazaným obsahom */
+}
+
+
+
+
+/* Média dotaz pro mobilní zařízení */
+@media screen and (max-width: 768px) {
+    body {
+        height: 100vh;
+        background-size: cover;
+        background-position: center;
+    }
+
+    .game-container {
+        grid-template-columns: repeat(4, 1fr); /* Méně sloupců pro menší obrazovky */
+        gap: 5px;
+        margin: 10px auto;
+        padding: 0 10px;
+    }
+
+    .card {
+        aspect-ratio: 1;
+        font-size: 12px;
+    }
+
+    .card img {
+        max-width: 60%;
+        max-height: 50%;
+        top: 15%; /* Mírná úprava pozice */
+    }
+
+    .card-word {
+        font-size: 12px;
+        bottom: 10px;
+    }
+
+    .stats {
+        font-size: 1em;
+        margin: 10px;
+    }
+
+    .back-button {
+        top: 10px;
+        left: 10px;
+        font-size: 20px;
+    }
+
+    .speech-container {
+        bottom: 10px;
+        width: 90%;
+        padding: 10px;
+    }
+
+    .players-container {
+        flex-direction: column;
+        align-items: center;
+        margin-bottom: 10px;
+        margin-top: 10px;
+    }
+
+    .player-indicator {
+        min-width: 200px;
+        margin: 5px 0;
+        padding: 10px;
+    }
+
+    .player-indicator .current-player {
+        font-size: 14px;
+    }
+
+    .modal-content {
+        width: 90%;
+        padding: 20px;
+    }
+}
+
+/* Pro velmi malé obrazovky (mobilní telefony) */
+@media screen and (max-width: 480px) {
+    .game-container {
+        grid-template-columns: repeat(3, 1fr); /* Ještě méně sloupců */
+        gap: 3px;
+    }
+
+    .card {
+        font-size: 10px;
+    }
+
+    .card img {
+        max-width: 50%;
+        max-height: 40%;
+    }
+
+    .card-word {
+        font-size: 10px;
+    }
+
+    .player-indicator {
+        min-width: 180px;
+    }
+}
+
+
+/* Responzivní úpravy pro tablety a mobilní zařízení */
+@media screen and (max-width: 1024px) {
+    .player-indicator {
+        width: calc(50% - 20px); /* Rozdělení na 2 sloupce */
+        min-width: 200px;
+        margin: 10px;
+    }
+}
+
+@media screen and (max-width: 768px) {
+    .players-container {
+        flex-direction: column;
+        align-items: center;
+    }
+
+    .player-indicator {
+        width: 90%; /* Téměř plná šířka */
+        max-width: 400px;
+        min-width: 180px;
+        margin: 10px 0;
+    }
+}
+
+@media screen and (max-width: 480px) {
+    .player-indicator {
+        width: 95%; /* Ještě větší šířka */
+        padding: 10px;
+    }
+
+    .player-indicator .current-player {
+        font-size: 14px;
+    }
+
+    .player-indicator .player-scores {
+        font-size: 12px;
+    }
+}
+
+/* Zbytek původního CSS zůstává stejný */
+.player-indicator .current-player {
+    font-size: 16px;
+    margin-bottom: 10px;
+}
+
+.player-indicator .player-name {
+    font-weight: bold;
+}
+
+.player-indicator .player-scores {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+}
+
+.player-indicator .player-scores div {
+    margin: 5px 0;
+}
+
+.player-indicator.active-player {
+    transform: scale(1.05);
+    box-shadow: 0 0 10px rgba(0,0,0,0.1);
+}
+
+
+
+
+
+
+
+
+

css/style.css

@@ -0,0 +1,753 @@
+/* ===== GLOBÁLNE ŠTÝLY ===== */
+
+/* Reset štýlov pre konzistenciu medzi prehliadačmi */
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+/* Základné nastavenia pre body */
+body {
+    margin: 0;
+    padding: 0;
+    min-height: 100vh;
+    font-family: "Luckiest Guy", sans-serif;
+    overflow: hidden; /* Zabráni scrollovaniu */
+    background: var(--Backgrtound, url('../images/worlds/background.jpg')) lightgray 50% / cover no-repeat;
+    box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);
+    cursor: url('../images/cursor.png') 5 5, auto;
+}
+
+
+
+
+/* ===== HLAVNÝ KONTAJNER ===== */
+/* Flexbox kontajner pre rozloženie na ľavo/pravo */
+.container {
+   display: flex;
+   width: 100vw;
+   height: 100vh;
+   align-items: center;
+   justify-content: center;
+   padding: 4rem 5rem;
+   gap: 5rem;
+}
+
+/* ===== ĽAVÁ SEKCIA (Logo + Menu) ===== */
+.left-section {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: flex-end;
+    position: relative;
+    right: auto;
+    z-index: 2;
+    margin-top: 2rem;
+}
+
+/* ===== LOGO SEKCIA ===== */
+
+.logo-container {
+    margin-bottom: 3rem;
+    position: relative;
+    z-index: 3;
+
+    /* Prechod pre animácie */
+    transition: transform 0.4s ease;
+    cursor: url('../images/cursor.png') 5 5, auto;
+}
+
+.logo-container:hover {
+    transform: rotate(0.093deg) scale(1.05);
+}
+
+.logo-text {
+    /* Základné nastavenia pre logo text kontajner */
+    width: 444px;
+    height: 73px;
+    flex-shrink: 0;
+    filter: drop-shadow(4px 8px 8px rgba(0, 0, 0, 0.30));
+}
+
+/* Hlavný text "JOŽINO" */
+.text-jozino {
+    display: flex;
+    width: 444px;
+    height: 43px;
+    transform: rotate(0.093deg);
+    flex-direction: column;
+    justify-content: flex-end;
+    flex-shrink: 0;
+    
+    /* Štýlovanie textu */
+    color: #FFF;
+    text-align: center;
+    -webkit-text-stroke-width: 1px;
+    -webkit-text-stroke-color: #000;
+    font-family: "Luckiest Guy", sans-serif;
+    font-size: 100px;
+    font-style: normal;
+    font-weight: 400;
+    line-height: 18px; /* 20% */
+    text-transform: uppercase;
+    margin-bottom: 0.5rem;
+    position: relative;
+    z-index: 10;
+    filter: drop-shadow(4px 8px 8px rgba(0, 0, 0, 0.30));
+}
+
+/* Podtext "BANÍK" */
+.text-banik {
+    -webkit-text-stroke-width: 1px;
+    -webkit-text-stroke-color: #000;
+    font-family: "Luckiest Guy", sans-serif;
+    font-size: 45px;
+    font-style: normal;
+    font-weight: 400;
+    line-height: 100%;
+    text-align: center;
+    text-transform: uppercase;
+    
+    /* Gradient pozadí pre text */
+    background: conic-gradient(from 90deg at 50% 50%, #ECD517 0deg, #ECBB17 360deg);
+    background-clip: text;
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    position: relative;
+    z-index: 20;
+    filter: drop-shadow(4px 8px 8px rgba(0, 0, 0, 0.30));
+}
+
+
+
+/* ===== LOADING ===== */
+.loading-screen {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: linear-gradient(135deg, #2c1810 0%, #1a0f08 100%);
+    z-index: 9999;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    opacity: 1;
+    transition: opacity 0.5s ease;
+}
+
+.loading-content {
+    text-align: center;
+    color: white;
+}
+
+.loading-logo {
+    margin-bottom: 2rem;
+}
+
+.loading-text-jozino {
+    display: flex;
+    width: 444px;
+    height: 43px;
+    transform: rotate(0.093deg);
+    flex-direction: column;
+    justify-content: flex-end;
+    flex-shrink: 0;
+    
+    /* Štýlovanie textu */
+    color: #FFF;
+    text-align: center;
+    -webkit-text-stroke-width: 1px;
+    -webkit-text-stroke-color: #000;
+    font-family: "Luckiest Guy", sans-serif;
+    font-size: 100px;
+    font-style: normal;
+    font-weight: 400;
+    line-height: 18px; /* 20% */
+    text-transform: uppercase;
+    margin-bottom: 0.5rem;
+    position: relative;
+    z-index: 10;
+    filter: drop-shadow(4px 8px 8px rgba(0, 0, 0, 0.30));
+}
+
+.loading-text-banik {
+    -webkit-text-stroke-width: 1px;
+    -webkit-text-stroke-color: #000;
+    font-family: "Luckiest Guy", sans-serif;
+    font-size: 45px;
+    font-style: normal;
+    font-weight: 400;
+    line-height: 100%;
+    text-align: center;
+    text-transform: uppercase;
+    
+    /* Gradient pozadí pre text */
+    background: conic-gradient(from 90deg at 50% 50%, #ECD517 0deg, #ECBB17 360deg);
+    background-clip: text;
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    position: relative;
+    z-index: 20;
+    filter: drop-shadow(4px 8px 8px rgba(0, 0, 0, 0.30));
+}
+
+.loading-spinner {
+    width: 50px;
+    height: 50px;
+    border: 4px solid rgba(236, 207, 23, 0.3);
+    border-top: 4px solid #ECCF17;
+    border-radius: 50%;
+    animation: spin 1s linear infinite;
+    margin: 0 auto 1rem;
+}
+
+@keyframes spin {
+    0% { transform: rotate(0deg); }
+    100% { transform: rotate(360deg); }
+}
+
+.loading-message {
+    font-family: "Luckiest Guy", sans-serif;
+    font-size: 22px;
+    color: #ECCF17;
+    animation: pulse 1.5s ease-in-out infinite;
+}
+
+@keyframes pulse {
+    0%, 100% { opacity: 0.7; }
+    50% { opacity: 1; }
+}
+
+
+
+
+/* ===== MENU SEKCIA ===== */
+.menu-container {
+    margin-bottom: 2rem;
+    z-index: 3;
+    position: relative;
+}
+
+.main-menu ul {
+    list-style: none;
+    padding: 0;
+    margin: 0;
+}
+
+.main-menu li {
+    margin-bottom: 1.5rem;
+}
+
+/* Štýlovanie menu tlačidiel */
+.menu-button {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    text-decoration: none;
+    cursor: pointer;
+    position: relative; 
+    
+    /* Rozměry tlačidla podľa Figma */
+    width: 253.111px;
+    height: 69.409px;
+    flex-shrink: 0;
+    border-radius: 30px;
+    
+    /* Tieň pre tlačidlá */
+    filter: drop-shadow(4px 8px 8px rgba(0, 0, 0, 0.30));
+    
+    /* Štandardné neaktívne tlačidlo */
+    border: 4px solid #AC3F0B;
+    background: url('../images/pozadie_button.png') lightgray 50% / cover no-repeat;
+    
+    /* Prechod pre animácie */
+    transition: all 0.3s ease;
+    
+    /* Text štýlovanie */
+    font-family: "Luckiest Guy", sans-serif;
+    font-size: 40px;
+    font-style: normal;
+    font-weight: 400;
+    line-height: 20px; /* 50% */
+    text-transform: uppercase;
+    text-align: center;
+    -webkit-text-stroke-width: 1px;
+    -webkit-text-stroke-color: #000;
+    
+    /* Základná farba textu pre neaktívne tlačidlá */
+    color: #FFF;
+
+    cursor: url('../images/active_cursor4.png') 5 5, pointer;
+}
+
+/* Štýlovanie pre hlavné/aktívne tlačidlo (ŠTART) */
+.menu-button.primary {
+    background: url('../images/pozadie_button.png') lightgray 50% / cover no-repeat;
+    color: linear-gradient(180deg, #EF0 0%, #FFD900 100%);
+}
+
+.menu-button.primary span {
+   background: linear-gradient(180deg, #EF0 0%, #FFD900 100%);
+   background-clip: text;
+   -webkit-background-clip: text;
+   -webkit-text-fill-color: transparent;
+       line-height: 150%;
+}
+
+/* Hover efekt pre menu tlačidlá */
+.menu-button:hover {
+    box-shadow: inset 0 0 20px 2px rgba(236, 207, 23, 0.3);
+    border: 4px solid #ECCF17;
+}
+
+/* Aktívne tlačidlo pri stlačení */
+.menu-button:active {
+    transform: rotate(0.093deg) translateY(0) scale(0.98);
+    filter: drop-shadow(2px 4px 4px rgba(0, 0, 0, 0.3));
+}
+
+/* ===== RADIÁLNY GRADIENT POZADÍ ===== */
+.radial-background {
+    position: absolute;
+    bottom: -100px;
+    left: 0;
+    transform: rotate(0.093deg);
+    
+    background: radial-gradient(43.78% 43.78% at 50% 50%, #000 0%, rgba(0, 0, 0, 0.00) 100%);
+    width: 540px;
+    height: 540px;
+    flex-shrink: 0;
+    z-index: 1;
+    pointer-events: none;
+}
+
+
+
+
+/* ===== PRAVÁ SEKCIA (Postavička) ===== */
+.right-section {
+    display: flex;
+    align-items: center;
+    justify-content: flex-start;
+    position: relative;
+    margin-top: 4rem;
+}
+
+.character-container {
+    position: relative;
+}
+
+/* Obrázok postavičky */
+.character-image {
+    /* Rozměry a transformácie podľa Figma */
+    width: 507px;
+    height: 439px;
+    transform: rotate(0.093deg);
+    flex-shrink: 0;
+    aspect-ratio: 82/71;
+    transition: transform 0.4s ease;
+}
+
+/* Hover efekt pre postavičku */
+.character-image:hover {
+    transform: rotate(0.093deg) scale(1.05);
+}
+
+
+
+
+/* ===== MODÁLNE OKNO (pre pravidlá) ===== */
+/* Modal overlay - cez celú obrazovku */
+.modal {
+   display: none;
+   position: fixed;
+   top: 0;
+   left: 0;
+   width: 100%;
+   height: 100%;
+   background: rgba(0, 0, 0, 0.14);
+   backdrop-filter: blur(9px);
+   z-index: 1000;
+   transition: all 0.3s ease;
+}
+
+.modal.modal-open {
+   background: rgba(0, 0, 0, 0.14);
+   backdrop-filter: blur(9px);
+}
+
+/* Zatváracie X tlačidlo */
+.close {
+   position: absolute;
+   top: 20px;
+   right: 30px;
+   color: #FFF;
+   text-align: center;
+   font-family: "Luckiest Guy", sans-serif;
+   font-size: 64px;
+   font-style: normal;
+   font-weight: 400;
+   line-height: normal;
+   cursor: url('../images/active_cursor4.png') 5 5, pointer;
+   z-index: 1001;
+   transition: transform 0.4s ease;
+}
+
+.close:hover {
+    transform: rotate(15deg) scale(1.05);
+}
+
+/* Modal obsah - zarovnaný na stred */
+.modal-content {
+   position: absolute;
+   top: 50%;
+   left: 50%;
+   transform: translate(-50%, -50%);
+   
+   
+   width: 70%;
+   height: 80%;
+   max-width: 750px;
+   max-height: 550px;
+   background: url('../images/pozadie_button_mobile_2.png') lightgray 50% / cover no-repeat;
+   
+   /* Vnútorný obsah */
+   display: flex;
+   flex-direction: column;
+   align-items: center;
+   text-align: center;
+   padding: 2rem 3rem;
+   box-sizing: border-box;
+   border: 4px solid #ECCF17;
+   border-radius: 30px;
+
+   /* Animácie */
+    transition: all 0.4s ease;
+}
+
+
+/* Názov v modal okne */
+.modal-content h2 {
+   margin: 0 0 1rem 0;
+   text-align: center;
+   -webkit-text-stroke-width: 1px;
+   -webkit-text-stroke-color: #000;
+   font-family: "Luckiest Guy", sans-serif;
+   font-size: 45px;
+   font-style: normal;
+   font-weight: 400;
+   line-height: 120%;
+   text-transform: uppercase;
+   
+   background: linear-gradient(180deg, #EF0 0%, #FFD900 100%);
+   background-clip: text;
+   -webkit-background-clip: text;
+   -webkit-text-fill-color: transparent;
+}
+
+/* Obsah textu */
+.modal-content p {
+   color: #FFF;
+   text-align: center;
+   font-family: "Luckiest Guy", sans-serif;
+   font-size: 22px;
+   font-style: normal;
+   font-weight: 100;
+   line-height: normal;
+   margin: 0;
+   padding: 0px 10px;
+   letter-spacing: 1.6px;
+}
+
+/* Obsah textu - kontajner pre scroll */
+.modal-text-content {
+   flex: 1;
+   overflow-y: auto;
+   max-height: calc(100% - 150px);
+   position: relative;
+}
+
+.modal-text-content span {
+   background: linear-gradient(180deg, #EF0 0%, #FFD900 100%);
+   background-clip: text;
+   -webkit-background-clip: text;
+   -webkit-text-fill-color: transparent;
+    line-height: 150%;
+}
+
+/* Skrytie scrollbaru úplne */
+.modal-text-content::-webkit-scrollbar {
+   display: none;
+}
+
+.modal-text-content {
+   -ms-overflow-style: none;
+   scrollbar-width: none;
+}
+
+/* Šípka hore - opravená farba */
+.modal-arrow-up {
+    width: 0;
+    height: 0;
+    border-left: 15px solid transparent;
+    border-right: 15px solid transparent;
+    border-bottom: 20px solid #FBDB68;
+    position: relative;
+    margin-bottom: 1rem;
+    filter: drop-shadow(4px 8px 8px rgba(0, 0, 0, 0.30));
+    cursor: url('../images/active_cursor4.png') 5 5, pointer;
+    transition: transform 0.3s ease, opacity 0.3s ease;
+}
+
+.modal-arrow-up::before {
+    content: '';
+    position: absolute;
+    bottom: -23px;
+    left: -18px;
+    width: 0;
+    height: 0;
+    border-left: 18px solid transparent;
+    border-right: 18px solid transparent;
+    border-bottom: 23px solid #FBDB68;
+}
+
+.modal-arrow-up:hover {
+   transform: translateY(-2px);
+   filter: drop-shadow(4px 8px 8px rgba(0, 0, 0, 0.30)) drop-shadow(0 0 10px rgba(255, 187, 0, 0.8));
+}
+
+/* Šípka dole - opravená farba */
+.modal-arrow-down {
+    width: 0;
+    height: 0;
+    border-left: 15px solid transparent;
+    border-right: 15px solid transparent;
+    border-top: 20px solid #FBDB68;
+    position: relative;
+    margin-top: 1rem;
+    filter: drop-shadow(4px 8px 8px rgba(0, 0, 0, 0.30));
+    cursor: url('../images/active_cursor4.png') 5 5, pointer;
+    transition: transform 0.3s ease, opacity 0.3s ease;
+}
+
+.modal-arrow-down::before {
+    content: '';
+    position: absolute;
+    top: -23px;
+    left: -18px;
+    width: 0;
+    height: 0;
+    border-left: 18px solid transparent;
+    border-right: 18px solid transparent;
+    border-top: 23px solid #FBDB68;
+}
+
+.modal-arrow-down:hover {
+   transform: translateY(2px);
+   filter: drop-shadow(4px 8px 8px rgba(0, 0, 0, 0.30)) drop-shadow(0 0 10px rgba(255, 187, 0, 0.8));
+}
+
+
+
+
+/* ===== RESPONZÍVNE ŠTÝLY ===== */
+/* Pre tablety a menšie obrazovky */
+@media (max-width: 1024px) {
+    .container {
+        padding: 1rem;
+        gap: 1rem;
+    }
+    
+    .text-jozino {
+        font-size: 80px;
+        width: auto;
+    }
+    
+    .text-banik {
+        font-size: 35px;
+    }
+    
+    .character-image {
+        width: 400px;
+        height: 346px;
+    }
+    
+    .radial-background {
+        width: 400px;
+        height: 400px;
+    }
+}
+
+/* Pre mobilné zariadenia */
+@media (max-width: 900px) {
+    .container {
+        padding: 0.5rem;
+    }
+    
+    .menu-button {
+        font-size: 2rem;
+        padding: 0.8rem 2rem;
+    }
+        
+    .radial-background {
+        width: 300px;
+        height: 300px;
+    }
+
+    .right-section{
+        display: none;
+    }
+
+    .close {
+    font-size: 44px;
+    }
+
+    .modal-content {
+    padding: 1rem 2rem;
+    }
+
+    .modal-content h2 {
+    margin: 0 0 1rem 0;
+    font-size: 35px;
+    }
+
+    .modal-content p {
+        font-size: 18px;
+        padding: 0px 10px;
+        letter-spacing: 1.6px;
+    }
+}
+
+/* Pre veľmi malé mobilné zariadenia */
+@media (max-width: 480px) {
+   .menu-button {
+        font-size: 1.2rem;
+        padding: 0.6rem 1.5rem;
+    }
+
+    .right-section{
+        display: none;
+    }
+
+    .menu-button {
+        width: 100%;
+        max-height: 49.409px;
+    }
+
+    .close {
+        font-size: 30px;
+    }
+
+    .modal-content {
+        padding: 1rem 1rem;
+    }
+
+    .modal-content h2 {
+        margin: 0 0 1rem 0;
+        font-size: 28px;
+    }
+
+    .modal-content p {
+        font-size: 14px;
+        padding: 0px 5px;
+        letter-spacing: 1.6px;
+        margin-bottom: 0.5rem;
+    }
+
+    .loading-logo {
+        margin-bottom: 2rem;
+    }
+
+    .loading-text-jozino {
+        font-size: 64px;
+        width: auto;
+        line-height: 0px; /* 20% */
+    }
+
+    .loading-text-banik {
+        font-size: 30px;
+        line-height: 20px; /* 20% */
+    }
+
+    .loading-message {
+        font-size: 20px;
+    }
+
+}
+
+@media (max-width: 290px) {
+    .logo-container {
+        margin-bottom: 1rem;
+        position: relative;
+    }
+
+    .text-jozino {
+        font-size: 35px;
+        width: auto;
+        line-height: 0px; /* 20% */
+    }
+    
+    .text-banik {
+        font-size: 20px;
+        line-height: 20px; /* 20% */
+    }
+
+   .menu-button {
+        font-size: 0.8rem;
+        padding: 0.6rem 1.0rem;
+    }
+
+    .right-section{
+        display: none;
+    }
+
+    .menu-button {
+        width: 100%;
+        max-height: 39.409px;
+    }
+
+    .main-menu li {
+        margin-bottom: 0.8rem;
+    }
+
+    .close {
+    font-size: 20px;
+    }
+
+    .modal-content {
+    padding: 1rem 1rem;
+    }
+
+    .modal-content h2 {
+    margin: 0 0 1rem 0;
+    font-size: 20px;
+    }
+
+    .modal-content p {
+        font-size: 10px;
+        padding: 0px 5px;
+        letter-spacing: 1.6px;
+        margin-bottom: 0.5rem;
+    }
+
+    .loading-logo {
+        margin-bottom: 2rem;
+    }
+
+    .loading-text-jozino {
+        font-size: 35px;
+        width: auto;
+        line-height: 0px; /* 20% */
+    }
+
+    .loading-text-banik {
+        font-size: 20px;
+        line-height: 20px; /* 20% */
+    }
+
+    .loading-message {
+        font-size: 18px;
+    }
+}

css/superjozino.css

@@ -0,0 +1,996 @@
+/* Základné štýly */
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+body {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    min-height: 100vh;
+    background-color: #333;
+    font-family: 'Arial', sans-serif;
+}
+
+.game-container {
+    position: relative;
+}
+
+#gameCanvas {
+    background-color: #000;
+    max-width: 100%;
+    height: auto;
+}
+
+/* Tlačidlá */
+.button {
+    background: #4CAF50;
+    color: white;
+    padding: 12px 24px;
+    border: none;
+    border-radius: 25px;
+    font-size: 16px;
+    cursor: pointer;
+    transition: all 0.3s ease;
+    margin: 5px;
+}
+
+.button:hover {
+    background: #45a049;
+    transform: scale(1.05);
+}
+
+.button:active {
+    transform: translateY(1px);
+    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+}
+
+/* Modálne okná */
+.modal {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: rgba(0, 0, 0, 0.8);
+    display: none;
+    justify-content: center;
+    align-items: center;
+    z-index: 1000;
+    backdrop-filter: blur(5px);
+}
+
+.modal-content {
+    background: white;
+    padding: 30px;
+    border-radius: 15px;
+    text-align: center;
+    max-width: 500px;
+    width: 90%;
+    box-shadow: 0 5px 15px rgba(0,0,0,0.3);
+    animation: modalAppear 0.3s ease-out;
+}
+
+@keyframes modalAppear {
+    from {
+        opacity: 0;
+        transform: translateY(-20px);
+    }
+    to {
+        opacity: 1;
+        transform: translateY(0);
+    }
+}
+
+/* Rečové cvičenia */
+.speech-modal {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: rgba(0, 0, 0, 0.9);
+    display: none;
+    justify-content: center;
+    align-items: center;
+    z-index: 1000;
+}
+
+.speech-content {
+    position: relative;
+    background: white;
+    padding: 30px;
+    border-radius: 15px;
+    text-align: center;
+    max-width: 400px;
+    width: 90%;
+}
+
+.speech-content img {
+    max-width: 200px;
+    margin-bottom: 20px;
+    border-radius: 10px;
+    box-shadow: 0 3px 6px rgba(0,0,0,0.1);
+}
+
+.speech-content h2 {
+    font-size: 24px;
+    color: #333;
+    margin-bottom: 20px;
+}
+
+.attempts-info {
+    font-size: 16px;
+    color: #666;
+    margin: 10px 0;
+}
+
+#startRecording {
+    background: #2196F3;
+    color: white;
+    padding: 12px 24px;
+    border: none;
+    border-radius: 25px;
+    font-size: 16px;
+    cursor: pointer;
+    transition: all 0.3s ease;
+    margin: 10px 0;
+}
+
+#startRecording:hover:not(:disabled) {
+    background: #1976D2;
+    transform: scale(1.05);
+}
+
+#startRecording:disabled {
+    background: #ccc;
+    cursor: not-allowed;
+}
+
+.result-message {
+    font-size: 16px;
+    font-weight: bold;
+    margin: 10px 0;
+    min-height: 20px;
+}
+
+#startRecording:hover {
+    background: #1976D2;
+    transform: scale(1.05);
+}
+
+#startRecording:active {
+    transform: scale(0.95);
+}
+
+/* Efekty pre správne/nesprávne odpovede */
+.correct-answer {
+    animation: correctPulse 0.5s ease-out;
+}
+
+.wrong-answer {
+    animation: wrongShake 0.5s ease-in-out;
+}
+
+@keyframes correctPulse {
+    0% {
+        transform: scale(1);
+        box-shadow: 0 0 0 0 rgba(76, 175, 80, 0.7);
+    }
+    50% {
+        transform: scale(1.05);
+        box-shadow: 0 0 0 10px rgba(76, 175, 80, 0);
+    }
+    100% {
+        transform: scale(1);
+        box-shadow: 0 0 0 0 rgba(76, 175, 80, 0);
+    }
+}
+
+@keyframes wrongShake {
+    0%, 100% {
+        transform: translateX(0);
+    }
+    25% {
+        transform: translateX(-10px);
+    }
+    75% {
+        transform: translateX(10px);
+    }
+}
+
+/* Game Over modal */
+.game-over-modal {
+    background: rgba(0, 0, 0, 0.95);
+}
+
+.game-over-content {
+    background: linear-gradient(145deg, #2c3e50, #3498db);
+    color: white;
+    padding: 40px;
+    border-radius: 20px;
+    text-align: center;
+}
+
+.game-over-content h2 {
+    font-size: 36px;
+    margin-bottom: 20px;
+    text-transform: uppercase;
+    letter-spacing: 2px;
+}
+
+.game-over-content p {
+    margin: 10px 0;
+    font-size: 18px;
+}
+
+.game-over-buttons {
+    margin-top: 30px;
+    display: flex;
+    justify-content: center;
+    gap: 20px;
+}
+
+/* Level Complete modal */
+.level-complete-modal {
+    background: rgba(0, 0, 0, 0.95);
+}
+
+.level-complete-content {
+    background: linear-gradient(145deg, #27ae60, #2ecc71);
+    color: white;
+}
+
+/* Animácia pre hviezdy */
+.star {
+    font-size: 40px;
+    color: #FFD700;
+    animation: starPop 0.5s ease-out;
+    display: inline-block;
+    margin: 0 10px;
+}
+
+@keyframes starPop {
+    0% {
+        transform: scale(0);
+    }
+    50% {
+        transform: scale(1.2);
+    }
+    100% {
+        transform: scale(1);
+    }
+}
+
+/* Mobile controls */
+.mobile-controls {
+    display: none;
+    position: absolute;
+    bottom: 20px;
+    left: 50%;
+    transform: translateX(-50%);
+    gap: 20px;
+}
+
+@media (max-width: 800px) {
+    .mobile-controls {
+        display: flex;
+    }
+}
+
+/* Debug panel */
+.debug-panel {
+    position: fixed;
+    top: 10px;
+    left: 10px;
+    background: rgba(0, 0, 0, 0.8);
+    padding: 15px;
+    border-radius: 10px;
+    color: white;
+    font-family: monospace;
+    font-size: 14px;
+    z-index: 100;
+}
+
+.debug-panel button {
+    background: #444;
+    color: white;
+    border: none;
+    padding: 5px 10px;
+    margin-bottom: 10px;
+    cursor: pointer;
+    border-radius: 5px;
+}
+
+.debug-panel button:hover {
+    background: #666;
+}
+
+
+
+/* ====================================== */
+/* POSLUCHOVÉ CVIČENIE - MODAL & DIALÓG */
+/* ====================================== */
+
+#zvuky {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: rgba(0, 0, 0, 0.85);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    z-index: 10000;
+}
+
+#blur-background {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: rgba(0, 0, 0, 0.5);
+    backdrop-filter: blur(5px);
+    z-index: 9999;
+}
+
+.listening-exercise-dialog {
+    background: linear-gradient(145deg, #ffffff, #f0f0f0);
+    border-radius: 30px;
+    padding: 40px;
+    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
+    max-width: 600px;
+    width: 90%;
+    animation: dialogSlideIn 0.4s ease-out;
+}
+
+@keyframes dialogSlideIn {
+    from {
+        transform: translateY(-50px);
+        opacity: 0;
+    }
+    to {
+        transform: translateY(0);
+        opacity: 1;
+    }
+}
+
+.dialog-header {
+    text-align: center;
+    margin-bottom: 30px;
+    border-bottom: 3px solid #3498db;
+    padding-bottom: 20px;
+}
+
+.dialog-header h2 {
+    font-family: "Luckiest Guy", sans-serif;
+    font-size: 32px;
+    color: #2c3e50;
+    margin: 0 0 10px 0;
+    text-transform: uppercase;
+    letter-spacing: 2px;
+}
+
+.progress-indicator {
+    font-family: "Luckiest Guy", sans-serif;
+    font-size: 18px;
+    color: #7f8c8d;
+}
+
+.dialog-content {
+    display: flex;
+    flex-direction: column;
+    gap: 25px;
+}
+
+.listening-info {
+    background: #ecf0f1;
+    border-radius: 15px;
+    padding: 20px;
+    border-left: 5px solid #3498db;
+}
+
+.instruction-text {
+    font-family: Arial, sans-serif;
+    font-size: 18px;
+    color: #2c3e50;
+    margin: 0;
+    line-height: 1.6;
+}
+
+.attempts-display {
+    text-align: center;
+    font-family: "Luckiest Guy", sans-serif;
+    font-size: 20px;
+    color: #2c3e50;
+    text-shadow: 1px 1px 2px rgba(0,0,0,0.3);
+    background: rgba(255, 255, 255, 0.1);
+    padding: 8px 16px;
+    border-radius: 20px;
+    border: 2px solid rgba(255, 255, 255, 0.2);
+    text-transform: uppercase;
+}
+
+.attempts-display span {
+    color: #f39c12;
+    font-weight: bold;
+}
+
+/* Tlačidlá pre prehrávanie zvukov */
+.sound-buttons-container {
+    display: flex;
+    justify-content: center;
+    gap: 20px;
+    margin: 10px 0;
+}
+
+.sound-play-btn {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    background: linear-gradient(135deg, #3498db, #5dade2);
+    border: 4px solid #2980b9;
+    border-radius: 20px;
+    padding: 15px 20px;
+    cursor: pointer;
+    transition: all 0.3s ease;
+    box-shadow: 0 6px 12px rgba(0,0,0,0.2);
+    min-width: 120px;
+}
+
+.sound-play-btn img {
+    width: 40px;
+    height: 40px;
+    margin-bottom: 8px;
+    transition: transform 0.3s ease;
+    filter: drop-shadow(2px 2px 4px rgba(0,0,0,0.3));
+}
+
+.sound-play-btn span {
+    font-family: "Luckiest Guy", sans-serif;
+    font-size: 16px;
+    color: #fff;
+    text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
+    text-transform: uppercase;
+}
+
+.sound-play-btn:hover {
+    transform: translateY(-3px) scale(1.05);
+    box-shadow: 0 8px 16px rgba(0,0,0,0.3);
+}
+
+.sound-play-btn:active {
+    transform: translateY(-1px) scale(1.02);
+}
+
+/* Kontajner pre tlačidlá odpovedí */
+.listening-buttons-container {
+    display: flex;
+    justify-content: center;
+    gap: 30px;
+    margin: 5px 0;
+    flex-wrap: nowrap;
+    flex-direction: row;
+}
+
+/* Tlačidlá pre posluchové cvičenie */
+.listening-btn {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    background: linear-gradient(135deg, #27ae60, #2ecc71);
+    border: 4px solid #1e8449;
+    border-radius: 25px;
+    padding: 20px 25px;
+    cursor: pointer;
+    transition: all 0.3s ease;
+    box-shadow: 0 6px 12px rgba(0,0,0,0.2);
+    min-width: 140px;
+    position: relative;
+    overflow: hidden;
+}
+
+.listening-btn img {
+    width: 50px;
+    height: 50px;
+    margin-bottom: 10px;
+    transition: transform 0.3s ease;
+    filter: drop-shadow(2px 2px 4px rgba(0,0,0,0.3));
+}
+
+.listening-btn span {
+    font-family: "Luckiest Guy", sans-serif;
+    font-size: 18px;
+    color: #fff;
+    text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
+    text-transform: uppercase;
+    letter-spacing: 1px;
+}
+
+/* Hover efekty */
+.listening-btn:hover {
+    transform: translateY(-3px) scale(1.05);
+    box-shadow: 0 8px 16px rgba(0,0,0,0.3);
+}
+
+.listening-btn:hover img {
+    transform: scale(0.98);
+}
+
+.listening-btn:hover::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: -100%;
+    width: 100%;
+    height: 100%;
+    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
+    transition: left 0.5s ease;
+    left: 100%;
+}
+
+/* Click efekt */
+.listening-btn:active {
+    transform: translateY(-1px) scale(1.02);
+    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
+}
+
+/* Špecifické farby pre tlačidlá */
+.listening-btn-same {
+    background: linear-gradient(135deg, #27ae60, #2ecc71);
+    border-color: #1e8449;
+}
+
+.listening-btn-same:hover {
+    background: linear-gradient(135deg, #2ecc71, #58d68d);
+    border-color: #27ae60;
+}
+
+.listening-btn-different {
+    background: linear-gradient(135deg, #e74c3c, #ec7063);
+    border-color: #c0392b;
+}
+
+.listening-btn-different:hover {
+    background: linear-gradient(135deg, #ec7063, #f1948a);
+    border-color: #e74c3c;
+}
+
+/* Kontajner pre výsledky */
+.listening-result {
+    display: flex;
+    justify-content: center;
+    margin: 20px 0;
+    opacity: 0;
+    transform: translateY(20px);
+    transition: all 0.5s ease;
+}
+
+.listening-result.show {
+    opacity: 1;
+    transform: translateY(0);
+}
+
+/* Výsledok - správny/nesprávny */
+.result-container {
+    display: flex;
+    align-items: center;
+    gap: 15px;
+    background: #fff;
+    padding: 20px 30px;
+    border-radius: 20px;
+    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
+    font-family: "Luckiest Guy", sans-serif;
+    font-size: 24px;
+}
+
+.result-container.correct {
+    background: linear-gradient(135deg, #27ae60, #2ecc71);
+    color: white;
+    animation: correctPulse 0.6s ease-out;
+}
+
+.result-container.incorrect {
+    background: linear-gradient(135deg, #e74c3c, #ec7063);
+    color: white;
+    animation: wrongShake 0.6s ease-in-out;
+}
+
+@keyframes correctPulse {
+    0% {
+        transform: scale(1);
+        box-shadow: 0 0 0 0 rgba(39, 174, 96, 0.7);
+    }
+    50% {
+        transform: scale(1.1);
+        box-shadow: 0 0 0 20px rgba(39, 174, 96, 0);
+    }
+    100% {
+        transform: scale(1);
+        box-shadow: 0 0 0 0 rgba(39, 174, 96, 0);
+    }
+}
+
+@keyframes wrongShake {
+    0%, 100% {
+        transform: translateX(0);
+    }
+    20%, 60% {
+        transform: translateX(-15px);
+    }
+    40%, 80% {
+        transform: translateX(15px);
+    }
+}
+
+/* Responzívny dizajn */
+@media (max-width: 768px) {
+    .listening-exercise-dialog {
+        padding: 25px;
+        max-width: 95%;
+    }
+    
+    .dialog-header h2 {
+        font-size: 24px;
+    }
+    
+    .listening-buttons-container {
+        flex-direction: column;
+        gap: 15px;
+    }
+    
+    .listening-btn {
+        width: 100%;
+        min-width: unset;
+    }
+    
+    .sound-buttons-container {
+        flex-direction: column;
+        gap: 15px;
+    }
+}
+
+
+
+/* ====================================== */
+/*     VIRTUAL JOYSTICK PRE MOBILY       */
+/*         (SuperJozino Edition)         */
+/* ====================================== */
+
+/* ===== AKČNÉ TLAČIDLO VĽAVO (JUMP) ===== */
+.action-controls {
+  position: fixed;
+  bottom: 25px;
+  left: 25px;
+  display: none; /* Skryté na desktopu */
+  padding: 20px;
+  z-index: 1000;
+}
+
+.action-button {
+  width: 80px;
+  height: 80px;
+  border: 4px solid #AC3F0B;
+  background: linear-gradient(180deg, #EF0 0%, #FFD900 100%);
+  color: #000;
+  cursor: pointer;
+  border-radius: 50%;
+  transition: all 0.2s ease;
+  box-shadow: 0 6px 20px rgba(255, 217, 0, 0.4);
+  user-select: none;
+  -webkit-tap-highlight-color: transparent;
+  font-family: "Luckiest Guy", sans-serif;
+  font-size: 32px;
+  font-weight: bold;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: relative;
+  opacity: 0.6;
+}
+
+/* Svetelný efekt na tlačidle */
+.action-button::before {
+  content: '';
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  border-radius: 50%;
+  background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.3), transparent 50%);
+  pointer-events: none;
+  opacity: 1;
+}
+
+/* Hover efekt */
+.action-button:hover {
+  transform: scale(1.05);
+  box-shadow: 0 8px 25px rgba(255, 217, 0, 0.6);
+  border: 4px solid #ECCF17;
+  background: linear-gradient(180deg, #FFD900 0%, #ECCF17 100%);
+  opacity: 1;
+}
+
+/* Stlačenie tlačidla */
+.action-button:active {
+  transform: scale(0.95);
+  box-shadow: 0 4px 15px rgba(255, 217, 0, 0.4);
+  border: 4px solid #9A0003;
+  background: linear-gradient(0deg, #AD0003 0%, #FF2528 100%);
+  color: #FFF;
+  opacity: 1;
+}
+
+/* Haptic feedback animácia */
+.action-button.pressed {
+  animation: hapticPulse 0.1s ease-out;
+}
+
+@keyframes hapticPulse {
+  0% { transform: scale(1); }
+  50% { transform: scale(0.95); }
+  100% { transform: scale(1); }
+}
+
+/* ===== VIRTUAL JOYSTICK VPRAVO ===== */
+.joystick-controls {
+  position: fixed;
+  bottom: 25px;
+  right: 25px;
+  display: none; /* Skryté na desktopu */
+  z-index: 1000;
+}
+
+/* Vonkajší kruh joysticku */
+.virtual-joystick {
+  position: relative;
+  width: 120px;
+  height: 120px;
+  background: rgba(50, 50, 50, 0.5);
+  backdrop-filter: blur(10px);
+  border-radius: 50%;
+  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
+  border: 4px solid #AC3F0B;
+  filter: drop-shadow(4px 8px 8px rgba(0, 0, 0, 0.30));
+  touch-action: none;
+  user-select: none;
+  opacity: 0.6;
+  transition: all 0.2s ease;
+}
+
+/* Vnútorný kruh - oblasť pohybu */
+.joystick-base {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  width: 90px;
+  height: 90px;
+  border-radius: 50%;
+  background: radial-gradient(circle at center, 
+    rgba(21, 152, 30, 0.1) 0%, 
+    rgba(21, 152, 30, 0.05) 50%, 
+    transparent 80%);
+  border: 2px dashed rgba(21, 152, 30, 0.4);
+  transition: all 0.2s ease;
+}
+
+/* Pohyblivý knob (ovládač) */
+.joystick-knob {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  width: 40px;
+  height: 40px;
+  background: linear-gradient(0deg, #15981E 0%, #0F1 100%);
+  border: 3px solid #1A511D;
+  border-radius: 50%;
+  box-shadow: 0 4px 15px rgba(21, 152, 30, 0.4);
+  transition: all 0.1s ease;
+  cursor: grab;
+  z-index: 10;
+  opacity: 1;
+}
+
+/* Stlačený knob */
+.joystick-knob:active {
+  cursor: grabbing;
+  transform: translate(-50%, -50%) scale(1.1);
+  box-shadow: 0 6px 20px rgba(21, 152, 30, 0.6);
+  border: 3px solid #ECCF17;
+}
+
+/* Indikátor smeru (bodka v strede knobu) */
+.joystick-knob::after {
+  content: '';
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  width: 12px;
+  height: 12px;
+  background: #FFF;
+  border-radius: 50%;
+  box-shadow: 0 0 0 2px #000;
+  opacity: 0.8;
+}
+
+/* Aktívny stav joysticku (keď sa používa) */
+.virtual-joystick.active {
+  border: 4px solid #ECCF17;
+  box-shadow: 0 8px 32px rgba(236, 207, 23, 0.4);
+  opacity: 1;
+}
+
+.virtual-joystick.active .joystick-base {
+  border: 2px solid rgba(236, 207, 23, 0.6);
+  background: radial-gradient(circle at center, 
+    rgba(236, 207, 23, 0.15) 0%, 
+    rgba(236, 207, 23, 0.08) 50%, 
+    transparent 80%);
+}
+
+/* ===== ANIMÁCIE PRE ZOBRAZENIE ===== */
+.action-controls.show, .joystick-controls.show {
+  animation: slideInMobile 0.3s ease-out;
+}
+
+@keyframes slideInMobile {
+  from {
+    opacity: 0;
+    transform: translateY(20px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+/* ===== ZOBRAZENIE NA MOBILNÝCH ZARIADENIACH ===== */
+@media (max-width: 800px) {
+    .action-controls {
+        display: block;
+    }
+    
+    .joystick-controls {
+        display: block;
+    }
+    
+    /* Skryť pôvodné mobilné tlačidlá */
+    .mobile-controls {
+        display: none !important;
+    }
+}
+
+/* Pre menšie mobily (telefóny) */
+@media (max-width: 480px) {
+    .action-button {
+        width: 70px;
+        height: 70px;
+        font-size: 28px;
+        bottom: 15px;
+        left: 15px;
+    }
+    
+    .action-controls {
+        bottom: 15px;
+        left: 15px;
+        padding: 15px;
+    }
+    
+    .virtual-joystick {
+        width: 100px;
+        height: 100px;
+    }
+    
+    .joystick-base {
+        width: 75px;
+        height: 75px;
+    }
+    
+    .joystick-knob {
+        width: 35px;
+        height: 35px;
+    }
+    
+    .joystick-controls {
+        bottom: 15px;
+        right: 15px;
+    }
+}
+
+/* Pre veľmi malé telefóny */
+@media (max-width: 360px) {
+    .action-button {
+        width: 60px;
+        height: 60px;
+        font-size: 24px;
+        bottom: 10px;
+        left: 10px;
+    }
+    
+    .action-controls {
+        bottom: 10px;
+        left: 10px;
+        padding: 10px;
+    }
+    
+    .virtual-joystick {
+        width: 90px;
+        height: 90px;
+    }
+    
+    .joystick-base {
+        width: 65px;
+        height: 65px;
+    }
+    
+    .joystick-knob {
+        width: 30px;
+        height: 30px;
+    }
+    
+    .joystick-controls {
+        bottom: 10px;
+        right: 10px;
+    }
+}
+
+/* ===== DEBUG REŽIM (voliteľný) ===== */
+.joystick-debug {
+  position: absolute;
+  top: -30px;
+  left: 50%;
+  transform: translateX(-50%);
+  background: rgba(0, 0, 0, 0.8);
+  color: white;
+  padding: 2px 8px;
+  border-radius: 10px;
+  font-size: 10px;
+  font-family: monospace;
+  display: none;
+  white-space: nowrap;
+}
+
+.virtual-joystick.debug .joystick-debug {
+  display: block;
+}
+
+/* ===== LANDSCAPE MÓDY (horizontálna orientácia) ===== */
+@media (max-width: 800px) and (orientation: landscape) {
+    .action-controls {
+        bottom: 15px;
+        left: 15px;
+    }
+    
+    .joystick-controls {
+        bottom: 15px;
+        right: 15px;
+    }
+    
+    .action-button {
+        width: 65px;
+        height: 65px;
+        font-size: 26px;
+    }
+    
+    .virtual-joystick {
+        width: 95px;
+        height: 95px;
+    }
+    
+    .joystick-knob {
+        width: 32px;
+        height: 32px;
+    }
+}
+
+
+
+

game.html

@@ -0,0 +1,204 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width,initial-scale=1.0">
+    <meta name="description" content="Logopedická hra pre najmenších">
+    <meta name="author" content="Adam Reňak">
+    <meta name="keywords" content="Adam Reňak, Joj_Dobre, Diplomová práca, Logopedická hra, TUKE">
+    <title>Baník Jožino: Logopedická hra - Diplomová práca</title>
+    <link rel="stylesheet" type="text/css" href="css/miner.css" />
+
+    <!-- Načítanie fontu Luckiest Guy z Google Fonts -->
+    <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=Luckiest+Guy&display=swap" rel="stylesheet">
+
+    <link rel="icon" type="image/png" href="images/banik.ico">
+    <link rel="shortcut icon" href="images/icons/banik.ico">
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/howler/2.2.3/howler.min.js"></script>
+
+    <script src="config/worlds.js"></script>
+    <script src="config/levels.js"></script>
+  </head>
+
+  <body>
+
+    <!-- LOADING -->
+    <div id="loading-screen" class="loading-screen">
+        <div class="loading-content">
+            <!-- Logo -->
+            <div class="loading-logo">
+                <div class="loading-text-jozino">JOŽINO</div>
+                <div class="loading-text-banik">BANÍK</div>
+            </div>
+            
+            <!-- Spinner -->
+            <div class="loading-spinner"></div>
+            
+            <!-- NOVÉ: Progress Bar -->
+            <div class="loading-progress-container">
+                <div class="loading-progress-bar">
+                    <div class="loading-progress-fill" id="loading-progress-fill"></div>
+                </div>
+                
+                <div class="loading-progress-text">
+                    <span id="loading-progress-percentage">0%</span>
+                    <span id="loading-progress-details">Pripravujem hru...</span>
+                </div>
+            </div>
+            
+            <!-- Loading Message -->
+            <div class="loading-message" id="loading-message">Načítavam zdroje...</div>
+        </div>
+    </div>
+
+    
+    <div class="menu-hra">
+      <button onclick="openDialog1()" class="kruhove-tlacidlo" id="menuButton"></button>
+    </div>
+
+    <!-- GAME -->
+    <div class="hra">
+      <div class="game-window">
+        <canvas id="gameCanvas" width="800" height="800"></canvas>
+      </div>
+
+      <div class="stats-menu">
+        <div class="window">
+          <div class="logo-container">
+            <div class="logo-text">
+              <div class="text-jozino">JOŽINO</div>
+              <div class="text-banik">BANÍK</div>
+            </div>
+          </div>
+          <div class="stats">
+            <div>
+              <a>Čas: </a>
+              <span id="game-timer">00:00</span>
+            </div>
+            <div>
+              <a>Slová: </a>
+              <span id="correct-words">0 <img src="images/spravne.png"></span>
+              <span> / </span>
+              <span id="incorrect-words">0 <img src="images/nespravne.png"></span>
+            </div>
+          </div>
+        </div>
+        <div class="menu-golds">
+          <h1>Zlato</h1>
+          <div class="golds-container"></div>
+        </div>
+        <div class="menu-diamonds">
+          <h1>Diamanty</h1>
+          <div class="diamonds-container"></div>
+        </div>
+        <div class="menu-kov">
+          <h1>Kryštály</h1>
+          <div class="kov-container"></div>
+        </div>
+      </div>
+
+      <!-- Akčné tlačidlo vľavo -->
+      <div class="controls-section">
+        <div class="action-controls">
+          <button class="action-button" data-action="dig">⛏</button>
+        </div>
+
+        <!-- Virtual joystick vpravo -->
+        <div class="joystick-controls">
+          <div class="virtual-joystick" id="virtualJoystick">
+            <div class="joystick-base"></div>
+            <div class="joystick-knob" id="joystickKnob"></div>
+            <div class="joystick-debug" id="joystickDebug">0, 0</div>
+          </div>
+        </div>
+      </div>
+
+    </div>
+    
+    <div id="cvicenie" class="modal">
+      <div class="execise-window">
+        <div id="vysledok" class="vysledok"></div>
+        <div class="cvicenie-content">
+          <div class="cvicenie-text"><p id="word-display">TRAKTOR</p></div>
+          <div class="cvicenie-text"><img id="cvicenie-image" src="images/slova/traktor.png"></div>
+          <div class="tlacidlo"><button id="rozpoznanie"><a>HOVORIŤ</a></button></div>
+        </div>
+      </div>
+    </div>
+
+    <div id="zvuky" class="cvicenie">
+      <div class="execise-window">
+        <div class="cvicenie-content-2">
+          <h1>ROZPOZNAJ SLOVÁ</h1>
+          <p>Sú slová rovnaké?</p>
+          <div id="buttonsContainer"></div>
+        </div>
+      </div>
+    </div>
+
+    <div id="endgame" class="cvicenie">
+      <div class="execise-window" style="max-height: 550px;">
+        <div class="cvicenie-content-2">
+          <h1>Prešiel si level!</h1>
+          <div class="stats">
+            <div>
+              <a>Čas: </a>
+              <span>02:43</span>
+            </div>
+            <div>
+              <a>Slová: </a>
+              <span>4</span> <img src="images/spravne.png">
+              <span> / </span>
+              <span>4 </span> <img src="images/nespravne.png">
+            </div>
+          </div>
+          <div id="modal-stars" class="modal-stars"></div>
+          <div class="gameend">
+            <nav class="main-menu">
+              <ul>
+                <li><button onclick="restartCurrentLevel()" class="menu-button">Hrať znova</button></li>
+                <li><button onclick="goToNextLevel()" class="menu-button">Ďalší level</button></li>
+                <li><button onclick="returnToMenu()" class="menu-button">Späť do menu</button></li>
+              </ul>
+            </nav>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <div id="dialogove-okno" class="dialogove-okno">
+      <div class="execise-window">
+        <span class="close" onclick="closeDialog1()">&times;</span>
+        <nav class="main-menu">
+            <ul>
+                <li><a href="game.html" alt="Reštart" class="menu-button">Reštart</a></li>
+                <li><a href="worldsmenu.html" alt="Koniec" class="menu-button">Koniec</a></li>
+                <li><a href="menu.html" alt="Menu" class="menu-button">Menu</a></li>
+            </ul>
+        </nav>
+      </div>
+    </div>
+
+  <div id="blur-background"></div>
+  <script src="js/managers/progressManager.js"></script>
+
+  <script src="js/game.js"></script>
+  <script>
+    function openDialog1() {
+    document.getElementById("dialogove-okno").style.display = "block";
+    document.getElementById("blur-background").style.display = "block";
+    document.body.classList.add("dialog-open");
+    document.body.style.overflow = "hidden"; // Zabrániť posúvaniu stránky
+  }
+
+  function closeDialog1() {
+    document.getElementById("dialogove-okno").style.display = "none";
+    document.getElementById("blur-background").style.display = "none";
+    document.body.classList.remove("dialog-open");
+    document.body.style.overflow = "auto"; // Povoliť posúvanie stránky
+  }
+  </script>
+  </body>
+</html>