/* Reset a základní styly */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: background 0.3s ease;
}

.screen {
    width: 100%;
    max-width: 600px;
    min-height: 100vh;
    padding: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.hidden {
    display: none !important;
}

/* ==================== */
/* ALBERT - Minecraft téma */
/* ==================== */

body.albert {
    background: linear-gradient(180deg, #87CEEB 0%, #87CEEB 60%, #228B22 60%, #228B22 100%);
    font-family: 'Courier New', monospace;
}

body.albert h1 {
    color: #2d5a27;
    text-shadow: 3px 3px 0 #1a3518;
    letter-spacing: 2px;
}

/* Minecraft tlačítka */
body.albert .section-btn,
body.albert .profile-btn.albert-btn,
body.albert .play-again-btn,
body.albert .menu-btn,
body.albert .scores-btn,
body.albert .tab-btn {
    background: linear-gradient(180deg, #8B8B8B 0%, #6B6B6B 50%, #5B5B5B 50%, #4B4B4B 100%);
    border: 4px solid #2B2B2B;
    color: white;
    font-family: 'Courier New', monospace;
    font-weight: bold;
    text-shadow: 2px 2px 0 #2B2B2B;
    box-shadow:
        inset 2px 2px 0 #ABABAB,
        inset -2px -2px 0 #3B3B3B;
    image-rendering: pixelated;
}

body.albert .section-btn:hover,
body.albert .play-again-btn:hover,
body.albert .menu-btn:hover,
body.albert .scores-btn:hover,
body.albert .tab-btn:hover {
    background: linear-gradient(180deg, #9B9B9B 0%, #7B7B7B 50%, #6B6B6B 50%, #5B5B5B 100%);
    transform: scale(1.02);
}

body.albert .section-btn:active,
body.albert .play-again-btn:active,
body.albert .menu-btn:active {
    transform: scale(0.98);
    box-shadow:
        inset -2px -2px 0 #ABABAB,
        inset 2px 2px 0 #3B3B3B;
}

/* Minecraft ikona profilu */
body.albert .profile-icon.albert-icon,
.albert-icon {
    width: 80px;
    height: 80px;
    background: linear-gradient(180deg,
        #8B4513 0%, #8B4513 30%,
        #DEB887 30%, #DEB887 70%,
        #4169E1 70%, #4169E1 100%);
    border: 4px solid #2B2B2B;
    image-rendering: pixelated;
}

/* Minecraft otázka box */
body.albert #question-box {
    background: linear-gradient(180deg, #C4A87C 0%, #A08050 100%);
    border: 6px solid #5C4033;
    box-shadow:
        inset 3px 3px 0 #D4B88C,
        inset -3px -3px 0 #8A6D4B;
}

body.albert #question-text {
    color: #2B2B2B;
    font-family: 'Courier New', monospace;
    text-shadow: 1px 1px 0 #D4B88C;
}

/* Minecraft odpovědi */
body.albert .answer-btn {
    background: linear-gradient(180deg, #8B8B8B 0%, #5B5B5B 100%);
    border: 4px solid #2B2B2B;
    color: white;
    font-family: 'Courier New', monospace;
    font-weight: bold;
    text-shadow: 2px 2px 0 #2B2B2B;
    box-shadow:
        inset 2px 2px 0 #ABABAB,
        inset -2px -2px 0 #3B3B3B;
}

body.albert .answer-btn:hover {
    background: linear-gradient(180deg, #6B9B6B 0%, #4B7B4B 100%);
}

body.albert .answer-btn.correct {
    background: linear-gradient(180deg, #4CAF50 0%, #2E7D32 100%);
    border-color: #1B5E20;
}

body.albert .answer-btn.wrong {
    background: linear-gradient(180deg, #f44336 0%, #c62828 100%);
    border-color: #b71c1c;
}

/* Minecraft header */
body.albert header {
    background: linear-gradient(180deg, #5C4033 0%, #3D2817 100%);
    border: 3px solid #2B1810;
}

body.albert .profile-indicator {
    background: linear-gradient(180deg, #8B8B8B 0%, #5B5B5B 100%);
    border: 3px solid #2B2B2B;
    color: white;
}

body.albert .game-info {
    color: #FFD700;
    text-shadow: 2px 2px 0 #2B2B2B;
}

/* Minecraft results */
body.albert .results-content {
    background: linear-gradient(180deg, #C4A87C 0%, #A08050 100%);
    border: 6px solid #5C4033;
}

body.albert .final-score span:last-child {
    color: #FFD700;
    text-shadow: 2px 2px 0 #2B2B2B;
}

body.albert #new-record {
    color: #FFD700;
    text-shadow: 2px 2px 0 #2B2B2B;
    animation: minecraft-blink 0.5s infinite;
}

@keyframes minecraft-blink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

/* Minecraft scores */
body.albert .score-item {
    background: linear-gradient(180deg, #8B8B8B 0%, #5B5B5B 100%);
    border: 3px solid #2B2B2B;
    color: white;
}

body.albert .score-item.gold {
    background: linear-gradient(180deg, #FFD700 0%, #DAA520 100%);
    color: #2B2B2B;
}

/* ==================== */
/* STELLA - Mořské panny / Moana téma */
/* ==================== */

body.stella {
    background: linear-gradient(180deg,
        #87CEEB 0%,
        #00CED1 20%,
        #20B2AA 40%,
        #008B8B 60%,
        #006994 80%,
        #004466 100%);
    font-family: 'Georgia', serif;
    position: relative;
}

/* Animované vlny */
body.stella::before {
    content: '';
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 150px;
    background:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 120'%3E%3Cpath fill='%23E8B4B8' opacity='0.4' d='M0,60 C300,120 400,0 600,60 C800,120 900,0 1200,60 L1200,120 L0,120 Z'/%3E%3C/svg%3E"),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 120'%3E%3Cpath fill='%23FFB6C1' opacity='0.3' d='M0,40 C200,100 400,0 600,40 C800,100 1000,0 1200,40 L1200,120 L0,120 Z'/%3E%3C/svg%3E");
    background-size: 100% 100%;
    animation: waves 8s ease-in-out infinite;
    pointer-events: none;
    z-index: 0;
}

body.stella::after {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image:
        radial-gradient(circle at 10% 20%, rgba(255,182,193,0.4) 3px, transparent 3px),
        radial-gradient(circle at 90% 15%, rgba(255,192,203,0.3) 4px, transparent 4px),
        radial-gradient(circle at 30% 80%, rgba(255,182,193,0.35) 2px, transparent 2px),
        radial-gradient(circle at 70% 70%, rgba(255,192,203,0.3) 3px, transparent 3px),
        radial-gradient(circle at 50% 40%, rgba(255,182,193,0.25) 2px, transparent 2px),
        radial-gradient(circle at 85% 60%, rgba(255,192,203,0.3) 3px, transparent 3px),
        radial-gradient(circle at 15% 50%, rgba(255,182,193,0.35) 2px, transparent 2px);
    animation: sparkle 4s ease-in-out infinite;
    pointer-events: none;
    z-index: 0;
}

/* Mořská panna - plovoucí dekorace */
.stella-mermaid {
    position: fixed;
    font-size: 120px;
    opacity: 0.6;
    pointer-events: none;
    z-index: 0;
    filter: drop-shadow(0 0 15px rgba(255,182,193,0.5));
}

.stella-mermaid.mermaid-1 {
    bottom: 100px;
    right: 10px;
    animation: float-mermaid 6s ease-in-out infinite;
}

.stella-mermaid.mermaid-2 {
    bottom: 60px;
    left: 10px;
    font-size: 80px;
    opacity: 0.4;
    animation: float-mermaid 8s ease-in-out infinite reverse;
}

/* Mušle a mořské hvězdice */
.stella-shell {
    position: fixed;
    font-size: 60px;
    opacity: 0.5;
    pointer-events: none;
    z-index: 0;
}

.stella-shell.shell-1 {
    bottom: 20px;
    left: 10%;
    animation: float-shell 5s ease-in-out infinite;
}

.stella-shell.shell-2 {
    bottom: 40px;
    right: 15%;
    font-size: 55px;
    animation: float-shell 7s ease-in-out infinite reverse;
}

.stella-shell.shell-3 {
    bottom: 15px;
    left: 55%;
    font-size: 50px;
    opacity: 0.4;
    animation: float-shell 6s ease-in-out infinite;
}

@keyframes float-mermaid {
    0%, 100% {
        transform: translateY(0) rotate(-5deg);
    }
    50% {
        transform: translateY(-20px) rotate(5deg);
    }
}

@keyframes float-shell {
    0%, 100% {
        transform: translateY(0) rotate(0deg);
    }
    50% {
        transform: translateY(-10px) rotate(10deg);
    }
}

@keyframes waves {
    0%, 100% { transform: translateX(0); }
    50% { transform: translateX(-20px); }
}

@keyframes sparkle {
    0%, 100% { opacity: 0.7; }
    50% { opacity: 1; }
}

/* Albert dekorace - Creeper na pozadí */
#albert-decorations {
    position: fixed;
    bottom: 20px;
    left: 20px;
    z-index: 0;
    pointer-events: none;
}

.creeper-bg {
    height: 150px;
    width: auto;
    opacity: 0.4;
    image-rendering: pixelated;
    filter: drop-shadow(0 4px 8px rgba(0,0,0,0.3));
    animation: creeper-idle 3s ease-in-out infinite;
}

@keyframes creeper-idle {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-5px);
    }
}

body.stella .screen {
    position: relative;
    z-index: 1;
}

body.stella h1 {
    color: #FFB6C1;
    text-shadow:
        2px 2px 4px rgba(0,0,0,0.3),
        0 0 20px rgba(255,182,193,0.5);
    font-style: italic;
}

/* Mořská tlačítka */
body.stella .section-btn,
body.stella .profile-btn.stella-btn,
body.stella .play-again-btn,
body.stella .menu-btn,
body.stella .scores-btn,
body.stella .tab-btn,
body.stella .category-btn,
body.stella .lesson-btn {
    background: linear-gradient(180deg,
        #FFB6C1 0%,
        #E8A0A8 30%,
        #DB8A94 70%,
        #CC7A84 100%);
    border: 3px solid #FFD700;
    color: white;
    font-family: 'Georgia', serif;
    font-style: italic;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.4);
    box-shadow:
        0 4px 15px rgba(255,182,193,0.5),
        inset 0 2px 4px rgba(255,255,255,0.4),
        0 0 20px rgba(255,182,193,0.3);
    border-radius: 30px;
    position: relative;
    overflow: hidden;
}

body.stella .section-btn::before,
body.stella .play-again-btn::before,
body.stella .menu-btn::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(
        45deg,
        transparent 40%,
        rgba(255,255,255,0.2) 50%,
        transparent 60%
    );
    animation: shimmer 3s infinite;
}

@keyframes shimmer {
    0% { transform: translateX(-100%) rotate(45deg); }
    100% { transform: translateX(100%) rotate(45deg); }
}

body.stella .section-btn:hover,
body.stella .play-again-btn:hover,
body.stella .menu-btn:hover,
body.stella .scores-btn:hover,
body.stella .tab-btn:hover,
body.stella .category-btn:hover,
body.stella .lesson-btn:hover {
    background: linear-gradient(180deg,
        #FFC8D0 0%,
        #F0B0B8 30%,
        #E89AA4 70%,
        #DB8A94 100%);
    transform: scale(1.05);
    box-shadow:
        0 6px 25px rgba(255,182,193,0.6),
        inset 0 2px 4px rgba(255,255,255,0.4),
        0 0 30px rgba(255,182,193,0.4);
}

body.stella .section-btn:active,
body.stella .play-again-btn:active,
body.stella .menu-btn:active {
    transform: scale(0.98);
}

/* Mořská panna ikona profilu */
body.stella .profile-icon.stella-icon,
.stella-icon {
    width: 80px;
    height: 80px;
    background: linear-gradient(180deg,
        #FFB6C1 0%, #FFB6C1 35%,
        #E8A0A8 35%, #E8A0A8 50%,
        #20B2AA 50%, #20B2AA 70%,
        #008B8B 70%, #008B8B 100%);
    border: 3px solid #FFD700;
    border-radius: 50% 50% 40% 40%;
    position: relative;
    box-shadow: 0 0 15px rgba(255,182,193,0.5);
}

.stella-icon::before {
    content: '';
    position: absolute;
    top: -8px;
    left: 50%;
    transform: translateX(-50%);
    width: 30px;
    height: 15px;
    background: linear-gradient(180deg, #FF69B4, #FFB6C1);
    border-radius: 50% 50% 0 0;
    border: 2px solid #FFD700;
    border-bottom: none;
}

.stella-icon::after {
    content: '';
    position: absolute;
    bottom: -5px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 15px solid transparent;
    border-right: 15px solid transparent;
    border-top: 12px solid #008B8B;
}

/* Mořská otázka box */
body.stella #question-box,
body.stella .word-card {
    background: linear-gradient(180deg,
        rgba(255,255,255,0.95) 0%,
        rgba(255,228,225,0.95) 50%,
        rgba(255,182,193,0.9) 100%);
    border: 4px solid #FFB6C1;
    border-radius: 25px;
    box-shadow:
        0 8px 25px rgba(0,0,0,0.2),
        inset 0 2px 4px rgba(255,255,255,0.8),
        0 0 30px rgba(255,182,193,0.3);
    position: relative;
}

body.stella #question-box::before {
    content: '';
    position: absolute;
    top: -2px;
    left: 10%;
    right: 10%;
    height: 4px;
    background: linear-gradient(90deg, transparent, #FFD700, transparent);
    border-radius: 2px;
}

body.stella #question-text,
body.stella .word-display {
    color: #006994;
    font-family: 'Georgia', serif;
    font-style: italic;
    text-shadow: 1px 1px 2px rgba(255,182,193,0.5);
}

/* Mořské odpovědi */
body.stella .answer-btn {
    background: linear-gradient(180deg,
        rgba(255,255,255,0.9) 0%,
        rgba(255,228,225,0.85) 100%);
    border: 3px solid #FFB6C1;
    color: #006994;
    font-family: 'Georgia', serif;
    font-style: italic;
    border-radius: 20px;
    box-shadow:
        0 4px 12px rgba(255,182,193,0.3),
        inset 0 1px 2px rgba(255,255,255,0.8);
    transition: all 0.3s ease;
}

body.stella .answer-btn:hover {
    background: linear-gradient(180deg,
        rgba(255,255,255,1) 0%,
        rgba(255,218,215,0.95) 100%);
    border-color: #FFD700;
    transform: scale(1.05);
    box-shadow:
        0 6px 18px rgba(255,182,193,0.4),
        0 0 15px rgba(255,182,193,0.3);
}

body.stella .answer-btn.correct {
    background: linear-gradient(180deg, #90EE90 0%, #32CD32 100%);
    border-color: #FFD700;
    color: white;
    box-shadow: 0 0 20px rgba(50,205,50,0.5);
}

body.stella .answer-btn.wrong {
    background: linear-gradient(180deg, #FFB6C1 0%, #FF6B6B 100%);
    border-color: #CC7A84;
    color: white;
}

/* Mořský header */
body.stella header {
    background: linear-gradient(180deg,
        rgba(255,182,193,0.9) 0%,
        rgba(232,160,168,0.85) 100%);
    border: 2px solid #FFD700;
    border-radius: 20px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.2);
}

body.stella .profile-indicator {
    background: linear-gradient(180deg,
        rgba(255,255,255,0.9) 0%,
        rgba(255,228,225,0.85) 100%);
    border: 2px solid #FFB6C1;
    border-radius: 15px;
    color: #006994;
}

body.stella .game-info {
    color: white;
    text-shadow: 1px 1px 3px rgba(0,0,0,0.4);
}

body.stella .back-btn {
    color: white;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.3);
}

/* Mořské results */
body.stella .results-content {
    background: linear-gradient(180deg,
        rgba(255,255,255,0.95) 0%,
        rgba(255,228,225,0.9) 50%,
        rgba(255,182,193,0.85) 100%);
    border: 4px solid #FFB6C1;
    border-radius: 30px;
    box-shadow:
        0 8px 30px rgba(0,0,0,0.2),
        0 0 40px rgba(255,182,193,0.3);
}

body.stella .final-score span:last-child {
    color: #006994;
    text-shadow: 2px 2px 4px rgba(255,182,193,0.5);
}

body.stella #new-record {
    color: #FFD700;
    text-shadow:
        2px 2px 0 #006994,
        -1px -1px 0 #006994,
        1px -1px 0 #006994,
        -1px 1px 0 #006994,
        0 0 20px rgba(255,215,0,0.5);
    animation: mermaid-glow 1.5s infinite;
}

@keyframes mermaid-glow {
    0%, 100% {
        transform: scale(1);
        text-shadow:
            2px 2px 0 #006994,
            0 0 20px rgba(255,215,0,0.5);
    }
    50% {
        transform: scale(1.1);
        text-shadow:
            2px 2px 0 #006994,
            0 0 40px rgba(255,215,0,0.8);
    }
}

/* Mořské scores */
body.stella .score-item {
    background: linear-gradient(180deg,
        rgba(255,255,255,0.9) 0%,
        rgba(255,228,225,0.85) 100%);
    border: 2px solid #FFB6C1;
    border-radius: 15px;
    color: #006994;
}

body.stella .score-item.gold {
    background: linear-gradient(180deg, #FFD700 0%, #FFC107 100%);
    border-color: #FFB6C1;
    color: #006994;
    box-shadow: 0 0 20px rgba(255,215,0,0.4);
}

/* Mořské sekce kategorie */
body.stella .category-box {
    background: linear-gradient(180deg,
        rgba(255,182,193,0.3) 0%,
        rgba(255,182,193,0.15) 100%);
    border: 3px solid #FFB6C1;
    border-radius: 25px;
    box-shadow: 0 4px 20px rgba(255,182,193,0.3);
}

body.stella .category-title {
    color: #FFB6C1;
    text-shadow: 1px 1px 3px rgba(0,0,0,0.3);
}

/* ==================== */
/* EMIČKA - Jednorožec / Duha téma */
/* ==================== */

body.emicka {
    background: linear-gradient(180deg,
        #F8E8FF 0%,
        #E8D5F5 20%,
        #D4BEE8 40%,
        #C9A8E0 60%,
        #B88FD4 80%,
        #A876C8 100%);
    font-family: 'Comic Sans MS', 'Chalkboard SE', cursive;
    position: relative;
}

/* Duha na pozadí */
body.emicka::before {
    content: '';
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 120px;
    background: linear-gradient(180deg,
        rgba(255,107,107,0.3) 0%,
        rgba(255,165,0,0.3) 16%,
        rgba(255,255,100,0.3) 32%,
        rgba(100,255,100,0.3) 48%,
        rgba(100,200,255,0.3) 64%,
        rgba(180,130,255,0.3) 80%,
        rgba(255,150,220,0.3) 100%);
    pointer-events: none;
    z-index: 0;
}

/* Třpytky */
body.emicka::after {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image:
        radial-gradient(circle at 15% 25%, rgba(255,215,0,0.4) 2px, transparent 2px),
        radial-gradient(circle at 85% 10%, rgba(255,182,255,0.35) 3px, transparent 3px),
        radial-gradient(circle at 40% 75%, rgba(255,215,0,0.3) 2px, transparent 2px),
        radial-gradient(circle at 75% 65%, rgba(200,150,255,0.35) 3px, transparent 3px),
        radial-gradient(circle at 55% 35%, rgba(255,215,0,0.25) 2px, transparent 2px),
        radial-gradient(circle at 25% 85%, rgba(255,182,255,0.3) 2px, transparent 2px);
    animation: emicka-sparkle 3s ease-in-out infinite;
    pointer-events: none;
    z-index: 0;
}

@keyframes emicka-sparkle {
    0%, 100% { opacity: 0.6; }
    50% { opacity: 1; }
}

/* Jednorožec - plovoucí dekorace */
.emicka-unicorn {
    position: fixed;
    font-size: 100px;
    opacity: 0.5;
    pointer-events: none;
    z-index: 0;
    filter: drop-shadow(0 0 15px rgba(200,150,255,0.5));
}

.emicka-unicorn.unicorn-1 {
    bottom: 80px;
    right: 10px;
    animation: float-unicorn 7s ease-in-out infinite;
}

.emicka-unicorn.unicorn-2 {
    bottom: 40px;
    left: 10px;
    font-size: 70px;
    opacity: 0.35;
    animation: float-unicorn 9s ease-in-out infinite reverse;
}

.emicka-star {
    position: fixed;
    font-size: 50px;
    opacity: 0.5;
    pointer-events: none;
    z-index: 0;
}

.emicka-star.star-1 {
    bottom: 25px;
    left: 12%;
    animation: float-star 5s ease-in-out infinite;
}

.emicka-star.star-2 {
    bottom: 50px;
    right: 18%;
    font-size: 45px;
    animation: float-star 6s ease-in-out infinite reverse;
}

.emicka-star.star-3 {
    bottom: 15px;
    left: 50%;
    font-size: 40px;
    opacity: 0.4;
    animation: float-star 7s ease-in-out infinite;
}

@keyframes float-unicorn {
    0%, 100% {
        transform: translateY(0) rotate(-3deg);
    }
    50% {
        transform: translateY(-15px) rotate(3deg);
    }
}

@keyframes float-star {
    0%, 100% {
        transform: translateY(0) scale(1);
    }
    50% {
        transform: translateY(-8px) scale(1.1);
    }
}

body.emicka .screen {
    position: relative;
    z-index: 1;
}

body.emicka h1 {
    color: #9B59B6;
    text-shadow:
        2px 2px 4px rgba(0,0,0,0.2),
        0 0 20px rgba(180,130,255,0.4);
}

/* Jednorožec tlačítka */
body.emicka .section-btn,
body.emicka .profile-btn.emicka-btn,
body.emicka .play-again-btn,
body.emicka .menu-btn,
body.emicka .scores-btn,
body.emicka .tab-btn,
body.emicka .category-btn,
body.emicka .lesson-btn {
    background: linear-gradient(180deg,
        #D4A8E8 0%,
        #C490DC 30%,
        #B478D0 70%,
        #A460C4 100%);
    border: 3px solid #FFD700;
    color: white;
    font-family: 'Comic Sans MS', 'Chalkboard SE', cursive;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.3);
    box-shadow:
        0 4px 15px rgba(180,130,255,0.4),
        inset 0 2px 4px rgba(255,255,255,0.3),
        0 0 20px rgba(180,130,255,0.2);
    border-radius: 25px;
    position: relative;
    overflow: hidden;
}

body.emicka .section-btn::before,
body.emicka .play-again-btn::before,
body.emicka .menu-btn::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(
        45deg,
        transparent 40%,
        rgba(255,255,255,0.2) 50%,
        transparent 60%
    );
    animation: shimmer 3s infinite;
}

body.emicka .section-btn:hover,
body.emicka .play-again-btn:hover,
body.emicka .menu-btn:hover,
body.emicka .scores-btn:hover,
body.emicka .tab-btn:hover,
body.emicka .category-btn:hover,
body.emicka .lesson-btn:hover {
    background: linear-gradient(180deg,
        #E0B8F0 0%,
        #D0A0E4 30%,
        #C088D8 70%,
        #B470CC 100%);
    transform: scale(1.05);
    box-shadow:
        0 6px 25px rgba(180,130,255,0.5),
        inset 0 2px 4px rgba(255,255,255,0.4),
        0 0 30px rgba(180,130,255,0.3);
}

body.emicka .section-btn:active,
body.emicka .play-again-btn:active,
body.emicka .menu-btn:active {
    transform: scale(0.98);
}

/* Jednorožec ikona profilu */
body.emicka .profile-icon.emicka-icon,
.emicka-icon {
    width: 80px;
    height: 80px;
    background: linear-gradient(180deg,
        #F8E8FF 0%, #F8E8FF 30%,
        #D4A8E8 30%, #D4A8E8 55%,
        #FFD700 55%, #FFD700 70%,
        #FF69B4 70%, #FF69B4 85%,
        #87CEEB 85%, #87CEEB 100%);
    border: 3px solid #FFD700;
    border-radius: 50%;
    position: relative;
    box-shadow: 0 0 15px rgba(180,130,255,0.5);
}

.emicka-icon::before {
    content: '';
    position: absolute;
    top: -10px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-bottom: 18px solid #FFD700;
}

.emicka-icon::after {
    content: '';
    position: absolute;
    bottom: -6px;
    left: 50%;
    transform: translateX(-50%);
    width: 40px;
    height: 8px;
    background: linear-gradient(90deg, #FF6B6B, #FFD700, #90EE90, #87CEEB, #B088F9);
    border-radius: 4px;
}

/* Jednorožec otázka box */
body.emicka #question-box,
body.emicka .word-card {
    background: linear-gradient(180deg,
        rgba(255,255,255,0.95) 0%,
        rgba(248,232,255,0.95) 50%,
        rgba(212,168,232,0.85) 100%);
    border: 4px solid #D4A8E8;
    border-radius: 25px;
    box-shadow:
        0 8px 25px rgba(0,0,0,0.15),
        inset 0 2px 4px rgba(255,255,255,0.8),
        0 0 30px rgba(180,130,255,0.2);
    position: relative;
}

body.emicka #question-box::before {
    content: '';
    position: absolute;
    top: -2px;
    left: 10%;
    right: 10%;
    height: 4px;
    background: linear-gradient(90deg, #FF6B6B, #FFD700, #90EE90, #87CEEB, #B088F9);
    border-radius: 2px;
}

body.emicka #question-text,
body.emicka .word-display {
    color: #7B2D8E;
    font-family: 'Comic Sans MS', 'Chalkboard SE', cursive;
    text-shadow: 1px 1px 2px rgba(180,130,255,0.3);
}

/* Jednorožec odpovědi */
body.emicka .answer-btn {
    background: linear-gradient(180deg,
        rgba(255,255,255,0.9) 0%,
        rgba(248,232,255,0.85) 100%);
    border: 3px solid #D4A8E8;
    color: #7B2D8E;
    font-family: 'Comic Sans MS', 'Chalkboard SE', cursive;
    border-radius: 20px;
    box-shadow:
        0 4px 12px rgba(180,130,255,0.2),
        inset 0 1px 2px rgba(255,255,255,0.8);
    transition: all 0.3s ease;
}

body.emicka .answer-btn:hover {
    background: linear-gradient(180deg,
        rgba(255,255,255,1) 0%,
        rgba(240,220,255,0.95) 100%);
    border-color: #FFD700;
    transform: scale(1.05);
    box-shadow:
        0 6px 18px rgba(180,130,255,0.3),
        0 0 15px rgba(180,130,255,0.2);
}

body.emicka .answer-btn.correct {
    background: linear-gradient(180deg, #90EE90 0%, #32CD32 100%);
    border-color: #FFD700;
    color: white;
    box-shadow: 0 0 20px rgba(50,205,50,0.5);
}

body.emicka .answer-btn.wrong {
    background: linear-gradient(180deg, #E8A0E8 0%, #D06BD0 100%);
    border-color: #A040A0;
    color: white;
}

/* Jednorožec header */
body.emicka header {
    background: linear-gradient(180deg,
        rgba(212,168,232,0.9) 0%,
        rgba(180,130,210,0.85) 100%);
    border: 2px solid #FFD700;
    border-radius: 20px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.15);
}

body.emicka .profile-indicator {
    background: linear-gradient(180deg,
        rgba(255,255,255,0.9) 0%,
        rgba(248,232,255,0.85) 100%);
    border: 2px solid #D4A8E8;
    border-radius: 15px;
    color: #7B2D8E;
}

body.emicka .game-info {
    color: white;
    text-shadow: 1px 1px 3px rgba(0,0,0,0.3);
}

body.emicka .back-btn {
    color: white;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.3);
}

/* Jednorožec results */
body.emicka .results-content {
    background: linear-gradient(180deg,
        rgba(255,255,255,0.95) 0%,
        rgba(248,232,255,0.9) 50%,
        rgba(212,168,232,0.85) 100%);
    border: 4px solid #D4A8E8;
    border-radius: 30px;
    box-shadow:
        0 8px 30px rgba(0,0,0,0.15),
        0 0 40px rgba(180,130,255,0.2);
}

body.emicka .final-score span:last-child {
    color: #7B2D8E;
    text-shadow: 2px 2px 4px rgba(180,130,255,0.4);
}

body.emicka #new-record {
    color: #FFD700;
    text-shadow:
        2px 2px 0 #7B2D8E,
        -1px -1px 0 #7B2D8E,
        1px -1px 0 #7B2D8E,
        -1px 1px 0 #7B2D8E,
        0 0 20px rgba(255,215,0,0.5);
    animation: unicorn-glow 1.5s infinite;
}

@keyframes unicorn-glow {
    0%, 100% {
        transform: scale(1);
        text-shadow:
            2px 2px 0 #7B2D8E,
            0 0 20px rgba(255,215,0,0.5);
    }
    50% {
        transform: scale(1.1);
        text-shadow:
            2px 2px 0 #7B2D8E,
            0 0 40px rgba(255,215,0,0.8);
    }
}

/* Jednorožec scores */
body.emicka .score-item {
    background: linear-gradient(180deg,
        rgba(255,255,255,0.9) 0%,
        rgba(248,232,255,0.85) 100%);
    border: 2px solid #D4A8E8;
    border-radius: 15px;
    color: #7B2D8E;
}

body.emicka .score-item.gold {
    background: linear-gradient(180deg, #FFD700 0%, #FFC107 100%);
    border-color: #D4A8E8;
    color: #7B2D8E;
    box-shadow: 0 0 20px rgba(255,215,0,0.4);
}

/* Jednorožec sekce kategorie */
body.emicka .category-box {
    background: linear-gradient(180deg,
        rgba(212,168,232,0.25) 0%,
        rgba(212,168,232,0.1) 100%);
    border: 3px solid #D4A8E8;
    border-radius: 25px;
    box-shadow: 0 4px 20px rgba(180,130,255,0.2);
}

body.emicka .category-title {
    color: #B088F9;
    text-shadow: 1px 1px 3px rgba(0,0,0,0.2);
}

/* ==================== */
/* ALIČKA - Huntrix / K-pop téma */
/* ==================== */

body.alicka {
    background: linear-gradient(180deg,
        #1A0529 0%,
        #2B0B3F 20%,
        #4A1259 40%,
        #7A1C8A 60%,
        #C71585 80%,
        #FF1493 100%);
    font-family: 'Trebuchet MS', 'Verdana', sans-serif;
    position: relative;
    color: white;
}

/* Neonová záře */
body.alicka::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background:
        radial-gradient(circle at 20% 20%, rgba(255,20,147,0.25) 0%, transparent 40%),
        radial-gradient(circle at 80% 30%, rgba(0,229,255,0.2) 0%, transparent 40%),
        radial-gradient(circle at 50% 80%, rgba(217,70,239,0.25) 0%, transparent 50%);
    pointer-events: none;
    z-index: 0;
}

/* Hvězdy a třpyt */
body.alicka::after {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image:
        radial-gradient(circle at 12% 22%, rgba(255,255,255,0.7) 1.5px, transparent 1.5px),
        radial-gradient(circle at 88% 18%, rgba(0,229,255,0.6) 2px, transparent 2px),
        radial-gradient(circle at 42% 70%, rgba(255,215,0,0.5) 2px, transparent 2px),
        radial-gradient(circle at 78% 60%, rgba(255,255,255,0.5) 1.5px, transparent 1.5px),
        radial-gradient(circle at 58% 30%, rgba(255,20,147,0.5) 2px, transparent 2px),
        radial-gradient(circle at 28% 88%, rgba(217,70,239,0.5) 2px, transparent 2px);
    animation: alicka-sparkle 2.5s ease-in-out infinite;
    pointer-events: none;
    z-index: 0;
}

@keyframes alicka-sparkle {
    0%, 100% { opacity: 0.5; }
    50% { opacity: 1; }
}

/* Mikrofony - plovoucí dekorace */
.alicka-mic {
    position: fixed;
    font-size: 90px;
    opacity: 0.55;
    pointer-events: none;
    z-index: 0;
    filter: drop-shadow(0 0 15px rgba(255,20,147,0.7));
}

.alicka-mic.mic-1 {
    bottom: 80px;
    right: 15px;
    animation: float-mic 6s ease-in-out infinite;
}

.alicka-mic.mic-2 {
    bottom: 60px;
    left: 15px;
    font-size: 70px;
    opacity: 0.4;
    animation: float-mic 8s ease-in-out infinite reverse;
}

.alicka-note {
    position: fixed;
    font-size: 50px;
    opacity: 0.6;
    pointer-events: none;
    z-index: 0;
    filter: drop-shadow(0 0 10px rgba(0,229,255,0.6));
}

.alicka-note.note-1 {
    top: 15%;
    left: 8%;
    animation: float-note 5s ease-in-out infinite;
}

.alicka-note.note-2 {
    top: 25%;
    right: 10%;
    font-size: 55px;
    animation: float-note 7s ease-in-out infinite reverse;
}

.alicka-note.note-3 {
    bottom: 30%;
    left: 12%;
    font-size: 40px;
    opacity: 0.5;
    animation: float-note 6s ease-in-out infinite;
}

.alicka-note.note-4 {
    bottom: 20%;
    right: 8%;
    font-size: 45px;
    animation: float-note 8s ease-in-out infinite reverse;
}

@keyframes float-mic {
    0%, 100% {
        transform: translateY(0) rotate(-8deg);
    }
    50% {
        transform: translateY(-20px) rotate(8deg);
    }
}

@keyframes float-note {
    0%, 100% {
        transform: translateY(0) scale(1);
    }
    50% {
        transform: translateY(-12px) scale(1.15);
    }
}

body.alicka .screen {
    position: relative;
    z-index: 1;
}

body.alicka h1 {
    color: #FFFFFF;
    text-shadow:
        0 0 8px #FF1493,
        0 0 16px #FF1493,
        0 0 30px rgba(217,70,239,0.7),
        2px 2px 4px rgba(0,0,0,0.5);
    letter-spacing: 1px;
}

/* Huntrix tlačítka */
body.alicka .section-btn,
body.alicka .profile-btn.alicka-btn,
body.alicka .play-again-btn,
body.alicka .menu-btn,
body.alicka .scores-btn,
body.alicka .tab-btn,
body.alicka .category-btn,
body.alicka .lesson-btn {
    background: linear-gradient(180deg,
        #FF1493 0%,
        #D9008C 30%,
        #B0006C 70%,
        #7A1C8A 100%);
    border: 3px solid #00E5FF;
    color: white;
    font-family: 'Trebuchet MS', 'Verdana', sans-serif;
    font-weight: bold;
    text-shadow: 1px 1px 3px rgba(0,0,0,0.5);
    box-shadow:
        0 4px 15px rgba(255,20,147,0.5),
        inset 0 2px 4px rgba(255,255,255,0.25),
        0 0 20px rgba(0,229,255,0.4);
    border-radius: 20px;
    position: relative;
    overflow: hidden;
    letter-spacing: 0.5px;
}

body.alicka .section-btn::before,
body.alicka .play-again-btn::before,
body.alicka .menu-btn::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(
        45deg,
        transparent 40%,
        rgba(255,255,255,0.25) 50%,
        transparent 60%
    );
    animation: shimmer 2.5s infinite;
}

body.alicka .section-btn:hover,
body.alicka .play-again-btn:hover,
body.alicka .menu-btn:hover,
body.alicka .scores-btn:hover,
body.alicka .tab-btn:hover,
body.alicka .category-btn:hover,
body.alicka .lesson-btn:hover {
    background: linear-gradient(180deg,
        #FF52B0 0%,
        #E91E97 30%,
        #C2007C 70%,
        #8E2BA0 100%);
    transform: scale(1.05);
    box-shadow:
        0 6px 25px rgba(255,20,147,0.6),
        inset 0 2px 4px rgba(255,255,255,0.35),
        0 0 30px rgba(0,229,255,0.6);
}

body.alicka .section-btn:active,
body.alicka .play-again-btn:active,
body.alicka .menu-btn:active {
    transform: scale(0.98);
}

/* Huntrix ikona profilu */
body.alicka .profile-icon.alicka-icon,
.alicka-icon {
    width: 80px;
    height: 80px;
    background: radial-gradient(circle at 50% 50%,
        #FFD700 0%, #FFD700 15%,
        #FF1493 15%, #FF1493 45%,
        #D946EF 45%, #D946EF 70%,
        #00E5FF 70%, #00E5FF 100%);
    border: 3px solid #FFD700;
    border-radius: 50%;
    position: relative;
    box-shadow:
        0 0 15px rgba(255,20,147,0.7),
        0 0 25px rgba(0,229,255,0.4),
        inset 0 2px 6px rgba(255,255,255,0.4);
}

.alicka-icon::before {
    content: '⭐';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 36px;
    filter: drop-shadow(0 0 4px rgba(0,0,0,0.5));
}

/* Huntrix otázka box */
body.alicka #question-box,
body.alicka .word-card {
    background: linear-gradient(180deg,
        rgba(43,11,63,0.92) 0%,
        rgba(74,18,89,0.9) 50%,
        rgba(122,28,138,0.85) 100%);
    border: 4px solid #FF1493;
    border-radius: 25px;
    box-shadow:
        0 8px 25px rgba(0,0,0,0.4),
        inset 0 2px 4px rgba(255,255,255,0.1),
        0 0 30px rgba(255,20,147,0.4),
        0 0 50px rgba(0,229,255,0.2);
    position: relative;
    color: white;
}

body.alicka #question-box::before {
    content: '';
    position: absolute;
    top: -2px;
    left: 8%;
    right: 8%;
    height: 4px;
    background: linear-gradient(90deg, #FF1493, #D946EF, #00E5FF, #FFD700, #FF1493);
    border-radius: 2px;
    box-shadow: 0 0 10px rgba(255,20,147,0.6);
}

body.alicka #question-text,
body.alicka .word-display {
    color: #FFFFFF;
    font-family: 'Trebuchet MS', 'Verdana', sans-serif;
    font-weight: bold;
    text-shadow:
        0 0 8px #FF1493,
        0 0 16px rgba(217,70,239,0.6),
        2px 2px 4px rgba(0,0,0,0.5);
}

/* Huntrix odpovědi */
body.alicka .answer-btn {
    background: linear-gradient(180deg,
        rgba(43,11,63,0.85) 0%,
        rgba(74,18,89,0.8) 100%);
    border: 3px solid #D946EF;
    color: white;
    font-family: 'Trebuchet MS', 'Verdana', sans-serif;
    font-weight: bold;
    border-radius: 20px;
    box-shadow:
        0 4px 12px rgba(255,20,147,0.3),
        inset 0 1px 2px rgba(255,255,255,0.15);
    transition: all 0.3s ease;
    text-shadow: 1px 1px 3px rgba(0,0,0,0.5);
}

body.alicka .answer-btn:hover {
    background: linear-gradient(180deg,
        rgba(74,18,89,0.95) 0%,
        rgba(122,28,138,0.9) 100%);
    border-color: #00E5FF;
    transform: scale(1.05);
    box-shadow:
        0 6px 18px rgba(255,20,147,0.5),
        0 0 20px rgba(0,229,255,0.4);
}

body.alicka .answer-btn.correct {
    background: linear-gradient(180deg, #00E5FF 0%, #00ACC1 100%);
    border-color: #FFD700;
    color: white;
    box-shadow: 0 0 25px rgba(0,229,255,0.7);
}

body.alicka .answer-btn.wrong {
    background: linear-gradient(180deg, #8E2BA0 0%, #4A1259 100%);
    border-color: #C71585;
    color: white;
}

/* Huntrix header */
body.alicka header {
    background: linear-gradient(180deg,
        rgba(43,11,63,0.9) 0%,
        rgba(122,28,138,0.85) 100%);
    border: 2px solid #FF1493;
    border-radius: 20px;
    box-shadow:
        0 4px 15px rgba(0,0,0,0.3),
        0 0 20px rgba(255,20,147,0.3);
}

body.alicka .profile-indicator {
    background: linear-gradient(180deg,
        rgba(255,20,147,0.2) 0%,
        rgba(217,70,239,0.2) 100%);
    border: 2px solid #00E5FF;
    border-radius: 15px;
    color: white;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
}

body.alicka .game-info {
    color: white;
    text-shadow:
        0 0 6px #FF1493,
        1px 1px 3px rgba(0,0,0,0.6);
}

body.alicka .back-btn {
    color: white;
    text-shadow:
        0 0 6px #00E5FF,
        1px 1px 2px rgba(0,0,0,0.5);
}

/* Huntrix results */
body.alicka .results-content {
    background: linear-gradient(180deg,
        rgba(43,11,63,0.95) 0%,
        rgba(74,18,89,0.9) 50%,
        rgba(122,28,138,0.85) 100%);
    border: 4px solid #FF1493;
    border-radius: 30px;
    box-shadow:
        0 8px 30px rgba(0,0,0,0.4),
        0 0 40px rgba(255,20,147,0.4);
    color: white;
}

body.alicka .final-score span:last-child {
    color: #FFD700;
    text-shadow:
        0 0 10px #FF1493,
        2px 2px 4px rgba(0,0,0,0.6);
}

body.alicka #new-record {
    color: #FFD700;
    text-shadow:
        2px 2px 0 #FF1493,
        -1px -1px 0 #FF1493,
        1px -1px 0 #FF1493,
        -1px 1px 0 #FF1493,
        0 0 25px rgba(255,215,0,0.8),
        0 0 40px rgba(255,20,147,0.6);
    animation: huntrix-glow 1.2s infinite;
}

@keyframes huntrix-glow {
    0%, 100% {
        transform: scale(1);
        text-shadow:
            2px 2px 0 #FF1493,
            0 0 20px rgba(255,215,0,0.6),
            0 0 30px rgba(255,20,147,0.4);
    }
    50% {
        transform: scale(1.1);
        text-shadow:
            2px 2px 0 #FF1493,
            0 0 35px rgba(255,215,0,1),
            0 0 60px rgba(0,229,255,0.7);
    }
}

/* Huntrix scores */
body.alicka .score-item {
    background: linear-gradient(180deg,
        rgba(43,11,63,0.85) 0%,
        rgba(74,18,89,0.8) 100%);
    border: 2px solid #D946EF;
    border-radius: 15px;
    color: white;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
}

body.alicka .score-item.gold {
    background: linear-gradient(180deg, #FFD700 0%, #FF8C00 100%);
    border-color: #FF1493;
    color: #2B0B3F;
    text-shadow: none;
    box-shadow: 0 0 25px rgba(255,215,0,0.6);
}

/* Huntrix sekce kategorie */
body.alicka .category-box {
    background: linear-gradient(180deg,
        rgba(255,20,147,0.18) 0%,
        rgba(217,70,239,0.1) 100%);
    border: 3px solid #FF1493;
    border-radius: 25px;
    box-shadow:
        0 4px 20px rgba(0,0,0,0.3),
        0 0 25px rgba(255,20,147,0.25);
}

body.alicka .category-title {
    color: #00E5FF;
    text-shadow:
        0 0 8px rgba(0,229,255,0.7),
        2px 2px 4px rgba(0,0,0,0.5);
}

/* ==================== */
/* Společné styly */
/* ==================== */

/* Výběr profilu */
#profile-selection {
    justify-content: center;
}

#profile-selection h1 {
    font-size: 2.5rem;
    margin-bottom: 60px;
}

.profile-buttons {
    display: flex;
    gap: 40px;
    flex-wrap: wrap;
    justify-content: center;
}

.profile-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
    padding: 30px 40px;
    font-size: 1.5rem;
    cursor: pointer;
    transition: all 0.3s ease;
}

.profile-icon {
    transition: transform 0.3s ease;
}

.profile-btn:hover .profile-icon {
    transform: scale(1.1);
}

/* Header */
header {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 20px;
    margin-bottom: 20px;
}

.profile-indicator {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 8px 15px;
    cursor: pointer;
    transition: transform 0.2s ease;
}

.profile-indicator:hover {
    transform: scale(1.05);
}

.switch-text {
    font-size: 0.75rem;
    opacity: 0.8;
}

.game-info {
    display: flex;
    gap: 20px;
    font-size: 1.1rem;
    font-weight: bold;
}

.back-btn {
    background: none;
    border: none;
    font-size: 1.2rem;
    cursor: pointer;
    padding: 5px 10px;
}

/* Menu */
#main-menu h1 {
    font-size: 3rem;
    margin: 40px 0;
}

.sections {
    display: flex;
    flex-direction: column;
    gap: 20px;
    width: 100%;
    max-width: 400px;
    margin-bottom: 40px;
}

.section-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
    padding: 25px 40px;
    font-size: 1.5rem;
    cursor: pointer;
    transition: all 0.3s ease;
}

.section-icon {
    font-size: 2rem;
}

.scores-btn {
    padding: 15px 30px;
    font-size: 1.2rem;
    cursor: pointer;
    transition: all 0.3s ease;
}

/* Herní obrazovka */
.game-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    gap: 40px;
}

#question-box {
    padding: 40px 60px;
    min-width: 250px;
    text-align: center;
}

#question-text {
    font-size: 3rem;
    font-weight: bold;
}

#answers-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 15px;
    width: 100%;
    max-width: 450px;
}

#answers-container .answer-btn:nth-child(4),
#answers-container .answer-btn:nth-child(5) {
    grid-column: span 1;
}

/* Centrování posledních dvou tlačítek */
#answers-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

#answers-container .answer-btn {
    width: calc(33% - 10px);
    min-width: 100px;
}

.answer-btn {
    padding: 20px;
    font-size: 1.5rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.answer-btn:disabled {
    cursor: not-allowed;
}

#feedback {
    position: fixed;
    bottom: 50px;
    left: 50%;
    transform: translateX(-50%);
    padding: 15px 30px;
    font-size: 1.5rem;
    font-weight: bold;
    border-radius: 10px;
    z-index: 100;
}

#feedback.correct {
    background: #4CAF50;
    color: white;
}

#feedback.wrong {
    background: #f44336;
    color: white;
}

/* Výsledky */
#results-screen {
    justify-content: center;
}

#results-screen h1 {
    font-size: 3rem;
    margin-bottom: 30px;
}

.results-content {
    padding: 40px;
    margin-bottom: 30px;
    width: 100%;
    max-width: 400px;
}

.final-score {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    margin-bottom: 30px;
}

.final-score span:first-child {
    font-size: 1.2rem;
}

.final-score span:last-child {
    font-size: 4rem;
    font-weight: bold;
}

.stats {
    display: flex;
    justify-content: space-around;
}

.stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
}

.stat-label {
    font-size: 1rem;
    opacity: 0.8;
}

.stat span:last-child {
    font-size: 1.5rem;
    font-weight: bold;
}

#new-record {
    margin-top: 20px;
    font-size: 1.5rem;
    font-weight: bold;
    text-align: center;
}

.results-buttons {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
    justify-content: center;
}

.play-again-btn,
.menu-btn {
    padding: 15px 30px;
    font-size: 1.2rem;
    cursor: pointer;
    transition: all 0.3s ease;
}

/* Top skóre */
#scores-screen h1 {
    font-size: 2.5rem;
    margin: 20px 0;
}

.scores-tabs {
    display: flex;
    gap: 10px;
    margin-bottom: 20px;
}

.tab-btn {
    padding: 10px 25px;
    font-size: 1rem;
    cursor: pointer;
    transition: all 0.3s ease;
    opacity: 0.7;
}

.tab-btn.active {
    opacity: 1;
    transform: scale(1.05);
}

#scores-list {
    width: 100%;
    max-width: 400px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.score-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 20px;
}

.score-rank {
    font-weight: bold;
    font-size: 1.2rem;
    width: 40px;
}

.score-value {
    font-size: 1.3rem;
    font-weight: bold;
    display: flex;
    align-items: center;
    gap: 8px;
}

.score-type {
    font-size: 0.7rem;
    padding: 2px 6px;
    border-radius: 8px;
    background: linear-gradient(180deg, #FFD700 0%, #FFA500 100%);
    color: #2B2B2B;
    font-weight: bold;
}

.score-date {
    font-size: 0.9rem;
    opacity: 0.8;
}

.no-scores {
    text-align: center;
    padding: 40px;
    opacity: 0.7;
    font-size: 1.2rem;
}

/* ==================== */
/* Kategorie a sekce */
/* ==================== */

.category-box {
    width: 100%;
    max-width: 450px;
    padding: 20px;
    margin-bottom: 25px;
    border-radius: 20px;
}

.category-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
}

.category-title {
    font-size: 1.8rem;
    margin: 0;
}

.category-total {
    font-size: 1rem;
    font-weight: bold;
    padding: 5px 12px;
    border-radius: 15px;
}

body.albert .category-total {
    background: linear-gradient(180deg, #FFD700 0%, #DAA520 100%);
    color: #2B2B2B;
    border: 2px solid #2B2B2B;
}

body.stella .category-total {
    background: linear-gradient(180deg, #FFD700 0%, #FFC107 100%);
    color: #006994;
    border: 2px solid #FFB6C1;
}

.category-items {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.item-row {
    display: flex;
    gap: 10px;
    align-items: stretch;
}

.item-row .section-btn {
    flex: 1;
    padding: 18px 25px;
    font-size: 1.3rem;
}

.trophy-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 15px;
    cursor: pointer;
    transition: all 0.3s ease;
    border: none;
    background: transparent;
}

.trophy-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 8px 12px;
    cursor: pointer;
    transition: all 0.3s ease;
    border-radius: 12px;
    min-width: 60px;
}

.trophy-box:hover {
    transform: scale(1.05);
}

.trophy-icon {
    font-size: 1.8rem;
    transition: transform 0.3s ease;
}

.best-score {
    font-size: 0.9rem;
    font-weight: bold;
    margin-top: 2px;
    color: #666;
}

.trophy-btn:hover .trophy-icon,
.trophy-box:hover .trophy-icon {
    transform: scale(1.2);
}

/* Albert trophy */
body.albert .trophy-btn,
body.albert .trophy-box {
    background: linear-gradient(180deg, #8B8B8B 0%, #5B5B5B 100%);
    border: 3px solid #2B2B2B;
    box-shadow:
        inset 2px 2px 0 #ABABAB,
        inset -2px -2px 0 #3B3B3B;
}

body.albert .best-score {
    color: #FFD700;
    text-shadow: 1px 1px 0 #2B2B2B;
}

body.albert .category-box {
    background: rgba(92, 64, 51, 0.3);
    border: 4px solid #5C4033;
}

body.albert .category-title {
    color: #FFD700;
    text-shadow: 2px 2px 0 #2B2B2B;
}

/* Stella trophy */
body.stella .trophy-btn,
body.stella .trophy-box {
    background: linear-gradient(180deg,
        rgba(255,255,255,0.9) 0%,
        rgba(255,228,225,0.85) 100%);
    border: 3px solid #FFB6C1;
    border-radius: 15px;
}

body.stella .best-score {
    color: #FF69B4;
}

/* Tlačítka s popiskem (XP info) */
.btn-content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
}

.btn-title {
    font-size: inherit;
}

.btn-info {
    font-size: 0.75rem;
    opacity: 0.8;
    font-weight: normal;
}

body.albert .btn-info {
    color: #FFD700;
    text-shadow: 1px 1px 0 #2B2B2B;
}

body.stella .btn-info {
    color: #FFE4E1;
    font-style: normal;
}

/* ==================== */
/* Lekce (Slovíčka) */
/* ==================== */

.lessons-grid {
    display: flex;
    flex-direction: column;
    gap: 15px;
    width: 100%;
    max-width: 500px;
    padding: 10px;
}

.lesson-row {
    display: flex;
    gap: 10px;
    width: 100%;
}

.lesson-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 20px 15px;
    font-size: 1.1rem;
    cursor: pointer;
    transition: all 0.3s ease;
    min-height: 100px;
    flex: 1;
}

.lesson-btn-typing {
    flex: 0 0 100px;
    min-height: auto;
    padding: 15px 10px;
}

.typing-badge {
    font-size: 1.2rem;
    font-weight: bold;
    margin-bottom: 5px;
}

body.albert .typing-badge {
    color: #FFD700;
    text-shadow: 1px 1px 0 #2B2B2B;
}

body.stella .typing-badge {
    color: #FFD700;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.3);
}

.lesson-number {
    font-size: 2rem;
    font-weight: bold;
    margin-bottom: 5px;
}

.lesson-name {
    font-size: 0.9rem;
    opacity: 0.9;
}

.lesson-info {
    font-size: 0.75rem;
    opacity: 0.7;
    margin-top: 5px;
}

.loading {
    padding: 40px;
    font-size: 1.2rem;
    opacity: 0.7;
    text-align: center;
}

/* ==================== */
/* Slovíčka - Duolingo styl */
/* ==================== */

.progress-bar {
    width: 100%;
    height: 12px;
    background: rgba(0,0,0,0.2);
    border-radius: 6px;
    margin-bottom: 30px;
    overflow: hidden;
}

.progress-fill {
    height: 100%;
    background: linear-gradient(90deg, #4CAF50, #8BC34A);
    border-radius: 6px;
    transition: width 0.3s ease;
    width: 0%;
}

.vocab-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    gap: 30px;
}

.word-card {
    padding: 30px 50px;
    min-width: 280px;
    text-align: center;
}

.word-label {
    font-size: 1rem;
    opacity: 0.7;
    margin-bottom: 10px;
}

.word-display {
    font-size: 2.5rem;
    font-weight: bold;
}

.vocab-answers {
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 100%;
    max-width: 350px;
}

.vocab-answers .answer-btn {
    width: 100%;
    padding: 18px 25px;
    font-size: 1.2rem;
    text-align: center;
}

#vocab-feedback {
    position: fixed;
    bottom: 50px;
    left: 50%;
    transform: translateX(-50%);
    padding: 15px 30px;
    font-size: 1.5rem;
    font-weight: bold;
    border-radius: 10px;
    z-index: 100;
}

#vocab-feedback.correct {
    background: #4CAF50;
    color: white;
}

#vocab-feedback.wrong {
    background: #f44336;
    color: white;
}

/* Albert vocab styly */
body.albert .word-card {
    background: linear-gradient(180deg, #C4A87C 0%, #A08050 100%);
    border: 6px solid #5C4033;
    box-shadow:
        inset 3px 3px 0 #D4B88C,
        inset -3px -3px 0 #8A6D4B;
}

body.albert .word-display {
    color: #2B2B2B;
    text-shadow: 1px 1px 0 #D4B88C;
}

body.albert .word-label {
    color: #5C4033;
}

body.albert .progress-fill {
    background: linear-gradient(90deg, #4CAF50, #2E7D32);
}

body.albert .lesson-btn {
    background: linear-gradient(180deg, #8B8B8B 0%, #5B5B5B 100%);
    border: 4px solid #2B2B2B;
    color: white;
    text-shadow: 2px 2px 0 #2B2B2B;
}

/* Stella vocab styly */
body.stella .word-label {
    color: #006994;
}

body.stella .progress-fill {
    background: linear-gradient(90deg, #FFB6C1, #FF69B4);
}

/* ==================== */
/* Celkové skóre a Level */
/* ==================== */

.main-header {
    justify-content: space-between;
    gap: 15px;
    flex-wrap: wrap;
}

/* Přepínač tříd - dropdown - skryto, třída je pevná podle profilu (PROFILE_GRADES) */
.grade-switcher {
    display: none;
}

.grade-select {
    padding: 8px 12px;
    border-radius: 12px;
    font-size: 0.85rem;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.2s ease;
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23666' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    padding-right: 30px;
}

body.albert .grade-select {
    background-color: rgba(92, 64, 51, 0.8);
    border: 2px solid #2B2B2B;
    color: white;
    text-shadow: 1px 1px 0 #2B2B2B;
    font-family: 'Courier New', monospace;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23fff' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
}

body.albert .grade-select:hover {
    background-color: rgba(92, 64, 51, 1);
}

body.albert .grade-select option {
    background-color: #5C4033;
    color: white;
}

body.stella .grade-select {
    background-color: rgba(255, 105, 180, 0.8);
    border: 2px solid #C71585;
    color: white;
    text-shadow: 1px 1px 0 rgba(0,0,0,0.3);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23fff' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
}

body.stella .grade-select:hover {
    background-color: rgba(255, 105, 180, 1);
}

body.stella .grade-select option {
    background-color: #DB7093;
    color: white;
}

.total-score-box {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 12px;
    border-radius: 15px;
}

.level-badge {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    flex-shrink: 0;
}

.level-number {
    font-size: 1.4rem;
    font-weight: bold;
    line-height: 1;
}

.level-label {
    font-size: 0.55rem;
    font-weight: bold;
    letter-spacing: 1px;
}

.score-details {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 100px;
}

.total-xp {
    display: flex;
    align-items: baseline;
    gap: 3px;
}

#total-xp-value {
    font-size: 1.2rem;
    font-weight: bold;
}

.xp-label {
    font-size: 0.7rem;
    opacity: 0.8;
}

.xp-progress-container {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.xp-progress-bar {
    height: 6px;
    background: rgba(0,0,0,0.2);
    border-radius: 3px;
    overflow: hidden;
}

.xp-progress-fill {
    height: 100%;
    border-radius: 3px;
    transition: width 0.5s ease;
    width: 0%;
}

.xp-next-level {
    font-size: 0.6rem;
    opacity: 0.8;
    text-align: right;
}

/* Albert Level styly */
body.albert .total-score-box {
    background: linear-gradient(180deg, rgba(92, 64, 51, 0.7) 0%, rgba(61, 40, 23, 0.7) 100%);
    border: 3px solid #5C4033;
}

body.albert .level-badge {
    background: linear-gradient(180deg, #FFD700 0%, #DAA520 100%);
    border: 3px solid #2B2B2B;
    box-shadow:
        inset 1px 1px 0 #FFEC8B,
        inset -1px -1px 0 #B8860B;
}

body.albert .level-number {
    color: #2B2B2B;
    text-shadow: 1px 1px 0 #FFEC8B;
}

body.albert .level-label {
    color: #5C4033;
}

body.albert #total-xp-value {
    color: #FFD700;
    text-shadow: 1px 1px 0 #2B2B2B;
}

body.albert .xp-label,
body.albert .xp-next-level {
    color: #D4B88C;
}

body.albert .xp-progress-fill {
    background: linear-gradient(90deg, #FFD700, #FFA500);
}

/* Stella Level styly */
body.stella .total-score-box {
    background: linear-gradient(180deg,
        rgba(255,182,193,0.5) 0%,
        rgba(255,182,193,0.3) 100%);
    border: 2px solid #FFB6C1;
}

body.stella .level-badge {
    background: linear-gradient(180deg, #FFD700 0%, #FFC107 100%);
    border: 2px solid #FFB6C1;
    box-shadow: 0 0 10px rgba(255,215,0,0.4);
}

body.stella .level-number {
    color: #006994;
}

body.stella .level-label {
    color: #006994;
}

body.stella #total-xp-value {
    color: #FFD700;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.3);
}

body.stella .xp-label,
body.stella .xp-next-level {
    color: white;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.3);
}

body.stella .xp-progress-fill {
    background: linear-gradient(90deg, #FFD700, #FFA500);
}

/* Mini Level Badge v herních obrazovkách */
.mini-level-badge {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 5px 10px;
    border-radius: 10px;
    min-width: 50px;
}

.mini-level-number {
    font-size: 1.2rem;
    font-weight: bold;
    line-height: 1;
}

.mini-xp {
    font-size: 0.6rem;
    opacity: 0.9;
}

body.albert .mini-level-badge {
    background: linear-gradient(180deg, #FFD700 0%, #DAA520 100%);
    border: 2px solid #2B2B2B;
}

body.albert .mini-level-number {
    color: #2B2B2B;
}

body.albert .mini-xp {
    color: #5C4033;
}

body.stella .mini-level-badge {
    background: linear-gradient(180deg, #FFD700 0%, #FFC107 100%);
    border: 2px solid #FFB6C1;
}

body.stella .mini-level-number {
    color: #006994;
}

body.stella .mini-xp {
    color: #006994;
}

/* ==================== */
/* Psací režim (3x XP) */
/* ==================== */

.xp-multiplier {
    background: linear-gradient(180deg, #FFD700 0%, #FFA500 100%);
    color: #2B2B2B;
    padding: 4px 10px;
    border-radius: 12px;
    font-weight: bold;
    font-size: 0.9rem;
    margin-left: 10px;
    animation: pulse-glow 2s infinite;
}

@keyframes pulse-glow {
    0%, 100% {
        box-shadow: 0 0 5px rgba(255,215,0,0.5);
    }
    50% {
        box-shadow: 0 0 15px rgba(255,215,0,0.8);
    }
}

.typing-input-container {
    display: flex;
    flex-direction: column;
    gap: 15px;
    width: 100%;
    max-width: 450px;
}

.typing-inputs-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
    width: 100%;
}

.typing-input {
    flex: 1;
    min-width: 80px;
    max-width: 200px;
    padding: 15px 10px;
    font-size: 1.2rem;
    border-radius: 15px;
    border: 3px solid #ccc;
    outline: none;
    text-align: center;
    transition: all 0.3s ease;
}

/* Pro jedno slovo - větší input */
.typing-inputs-row.single-word .typing-input {
    max-width: 350px;
    padding: 18px 25px;
    font-size: 1.3rem;
}

.typing-input:focus {
    border-color: #4CAF50;
    box-shadow: 0 0 10px rgba(76,175,80,0.3);
}

.typing-input.correct {
    border-color: #4CAF50;
    background: rgba(76,175,80,0.1);
}

.typing-input.wrong {
    border-color: #f44336;
    background: rgba(244,67,54,0.1);
}

.typing-submit-btn {
    padding: 15px 30px;
    font-size: 1.2rem;
    font-weight: bold;
    cursor: pointer;
    border: none;
    border-radius: 15px;
    transition: all 0.3s ease;
}

.typing-submit-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Albert typing styly */
body.albert .typing-input {
    background: linear-gradient(180deg, #E8E8E8 0%, #D0D0D0 100%);
    border: 3px solid #5C4033;
    color: #2B2B2B;
}

body.albert .typing-input:focus {
    border-color: #4CAF50;
}

body.albert .typing-submit-btn {
    background: linear-gradient(180deg, #4CAF50 0%, #2E7D32 100%);
    border: 3px solid #1B5E20;
    color: white;
    text-shadow: 1px 1px 0 #1B5E20;
}

body.albert .typing-submit-btn:hover:not(:disabled) {
    background: linear-gradient(180deg, #66BB6A 0%, #43A047 100%);
    transform: scale(1.02);
}

/* Stella typing styly */
body.stella .typing-input {
    background: linear-gradient(180deg, rgba(255,255,255,0.95) 0%, rgba(255,228,225,0.9) 100%);
    border: 3px solid #FFB6C1;
    color: #006994;
    font-family: 'Georgia', serif;
}

body.stella .typing-input:focus {
    border-color: #FF69B4;
    box-shadow: 0 0 15px rgba(255,182,193,0.5);
}

body.stella .typing-submit-btn {
    background: linear-gradient(180deg, #90EE90 0%, #32CD32 100%);
    border: 3px solid #FFD700;
    color: white;
    font-family: 'Georgia', serif;
    font-style: italic;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.3);
}

body.stella .typing-submit-btn:hover:not(:disabled) {
    background: linear-gradient(180deg, #98FB98 0%, #3CB371 100%);
    transform: scale(1.02);
}

#typing-feedback {
    position: fixed;
    bottom: 50px;
    left: 50%;
    transform: translateX(-50%);
    padding: 15px 30px;
    font-size: 1.5rem;
    font-weight: bold;
    border-radius: 10px;
    z-index: 100;
}

#typing-feedback.correct {
    background: #4CAF50;
    color: white;
}

#typing-feedback.wrong {
    background: #f44336;
    color: white;
}

/* ==========================================
   SLABIKY - ČEŠTINA
   ========================================== */

.syllables-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20px;
    gap: 20px;
}

.syllables-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
}

.syllables-image {
    font-size: 120px;
    line-height: 1;
    filter: drop-shadow(0 4px 8px rgba(0,0,0,0.2));
}

.sound-btn {
    font-size: 40px;
    background: rgba(255,255,255,0.2);
    border: none;
    border-radius: 50%;
    width: 70px;
    height: 70px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.sound-btn:hover {
    background: rgba(255,255,255,0.4);
    transform: scale(1.1);
}

.sound-btn:active {
    transform: scale(0.95);
}

.selected-syllables {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    min-height: 60px;
    padding: 15px;
    background: rgba(255,255,255,0.1);
    border-radius: 15px;
    min-width: 200px;
}

.selected-syllable {
    padding: 12px 20px;
    font-size: 1.5rem;
    font-weight: bold;
    border-radius: 10px;
    background: rgba(255,255,255,0.3);
    color: #333;
    transition: all 0.3s ease;
    cursor: pointer;
}

.selected-syllable:hover {
    opacity: 0.7;
    transform: scale(0.95);
}

.selected-syllable.correct,
.selected-syllable.wrong {
    cursor: default;
    pointer-events: none;
}

.selected-syllable.correct {
    background: #4CAF50;
    color: white;
}

.selected-syllable.wrong {
    background: #f44336;
    color: white;
}

.syllables-choices {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
    max-width: 500px;
}

.syllable-btn {
    padding: 15px 25px;
    font-size: 1.4rem;
    font-weight: bold;
    border: none;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.3s ease;
    min-width: 80px;
}

.syllable-btn:hover:not(:disabled) {
    transform: translateY(-3px);
    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
}

.syllable-btn:active:not(:disabled) {
    transform: translateY(0);
}

.syllable-btn.selected {
    opacity: 0.5;
    transform: scale(0.9);
}

.syllable-btn:disabled {
    cursor: not-allowed;
}

/* Albert syllables styly */
body.albert .syllable-btn {
    background: linear-gradient(180deg, #8B7355 0%, #6B5344 100%);
    color: white;
    border: 3px solid #5C4033;
}

body.albert .syllable-btn:hover:not(:disabled) {
    background: linear-gradient(180deg, #9B8365 0%, #7B6354 100%);
}

body.albert .selected-syllable {
    background: linear-gradient(180deg, #8B7355 0%, #6B5344 100%);
    color: white;
}

body.albert .sound-btn {
    background: rgba(139,115,85,0.3);
}

body.albert .selected-syllables {
    background: rgba(139,115,85,0.2);
    border: 2px solid rgba(139,115,85,0.3);
}

/* Stella syllables styly */
body.stella .syllable-btn {
    background: linear-gradient(180deg, #FF69B4 0%, #DB7093 100%);
    color: white;
    border: 3px solid #C71585;
}

body.stella .syllable-btn:hover:not(:disabled) {
    background: linear-gradient(180deg, #FF79C4 0%, #EB80A3 100%);
}

body.stella .selected-syllable {
    background: linear-gradient(180deg, #FF69B4 0%, #DB7093 100%);
    color: white;
}

body.stella .sound-btn {
    background: rgba(255,105,180,0.3);
}

body.stella .selected-syllables {
    background: rgba(255,105,180,0.2);
    border: 2px solid rgba(255,105,180,0.3);
}

/* Syllables feedback */
#syllables-feedback {
    position: fixed;
    bottom: 100px;
    left: 50%;
    transform: translateX(-50%);
    padding: 15px 30px;
    font-size: 1.5rem;
    font-weight: bold;
    border-radius: 10px;
    z-index: 100;
}

#syllables-feedback.correct {
    background: #4CAF50;
    color: white;
}

#syllables-feedback.wrong {
    background: #f44336;
    color: white;
}

/* ==================== */
/* FEEDBACK POSTAVIČKY */
/* ==================== */

#feedback-characters {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    z-index: 1000;
}

.feedback-character {
    position: fixed;
    bottom: 80px;
    display: flex;
    flex-direction: column;
    align-items: center;
    opacity: 0;
    transform: translateY(50px);
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.feedback-character.show {
    opacity: 1;
    transform: translateY(0);
}

.feedback-character.right-char {
    right: 20px;
}

.feedback-character.left-char {
    left: 20px;
}

.feedback-character .character-emoji {
    font-size: 80px;
    filter: drop-shadow(0 4px 8px rgba(0,0,0,0.3));
}

.feedback-character .speech-bubble {
    background: white;
    border-radius: 20px;
    padding: 10px 20px;
    margin-bottom: 10px;
    font-size: 24px;
    font-weight: bold;
    position: relative;
    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}

.feedback-character .speech-bubble::after {
    content: '';
    position: absolute;
    bottom: -15px;
    left: 50%;
    transform: translateX(-50%);
    border-width: 15px 10px 0 10px;
    border-style: solid;
    border-color: white transparent transparent transparent;
}

/* Defaultně skryj všechny charaktery */
.stella-character,
.albert-character,
.emicka-character,
.alicka-character {
    display: none;
}

/* Stella verze - růžové bubliny */
body.stella .stella-character {
    display: flex !important;
}

body.stella .speech-bubble {
    background: linear-gradient(135deg, #FFB6C1, #FF69B4);
    color: white;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.2);
}

body.stella .speech-bubble::after {
    border-color: #FF69B4 transparent transparent transparent;
}

/* Albert verze - Minecraft styl */
body.albert .albert-character {
    display: flex !important;
}

body.albert .speech-bubble {
    background: linear-gradient(180deg, #8B8B8B 0%, #5B5B5B 100%);
    border: 3px solid #2B2B2B;
    color: white;
    font-family: 'Courier New', monospace;
    text-shadow: 2px 2px 0 #2B2B2B;
    border-radius: 5px;
}

body.albert .speech-bubble::after {
    border-color: #5B5B5B transparent transparent transparent;
}

/* Emicka verze - fialové bubliny */
body.emicka .emicka-character {
    display: flex !important;
}

body.emicka .speech-bubble {
    background: linear-gradient(135deg, #D4A8E8, #B088F9);
    color: white;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.2);
}

body.emicka .speech-bubble::after {
    border-color: #B088F9 transparent transparent transparent;
}

.emicka-emoji-char {
    font-size: 80px;
    line-height: 1;
    display: block;
    height: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Alicka verze - neonové bubliny */
body.alicka .alicka-character {
    display: flex !important;
}

body.alicka .speech-bubble {
    background: linear-gradient(135deg, #FF1493, #D946EF);
    border: 2px solid #00E5FF;
    color: white;
    font-weight: bold;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.4);
    box-shadow: 0 0 15px rgba(255,20,147,0.5);
}

body.alicka .speech-bubble::after {
    border-color: #D946EF transparent transparent transparent;
}

.alicka-emoji-char {
    font-size: 80px;
    line-height: 1;
    height: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
    filter: drop-shadow(0 0 12px rgba(255,20,147,0.7));
}

/* Obrázky postav */
.feedback-character .character-img {
    height: 120px;
    width: auto;
    filter: drop-shadow(0 4px 8px rgba(0,0,0,0.3));
}

/* Minecraft styl - pixelované */
body.albert .character-img {
    image-rendering: pixelated;
}

/* Mořská panna - větší a hladká */
.mermaid-img {
    height: 150px;
    filter: drop-shadow(0 4px 12px rgba(255,105,180,0.4));
}

/* ==========================================
   GRAMATIKA - SKLÁDÁNÍ VĚT
   ========================================== */

.grammar-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20px;
    gap: 25px;
    width: 100%;
}

.grammar-card {
    text-align: center;
    padding: 25px 40px;
    min-width: 300px;
}

.grammar-label {
    font-size: 1rem;
    opacity: 0.7;
    margin-bottom: 10px;
}

.grammar-czech {
    font-size: 1.8rem;
    font-weight: bold;
}

.grammar-selected {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    min-height: 60px;
    padding: 15px;
    background: rgba(255,255,255,0.1);
    border-radius: 15px;
    min-width: 300px;
    max-width: 500px;
}

.grammar-selected-word {
    padding: 10px 18px;
    font-size: 1.2rem;
    font-weight: bold;
    border-radius: 10px;
    background: rgba(255,255,255,0.3);
    color: #333;
    transition: all 0.3s ease;
    cursor: pointer;
}

.grammar-selected-word:hover {
    opacity: 0.7;
    transform: scale(0.95);
}

.grammar-selected-word.correct,
.grammar-selected-word.wrong {
    cursor: default;
    pointer-events: none;
}

.grammar-selected-word.correct {
    background: #4CAF50;
    color: white;
}

.grammar-selected-word.wrong {
    background: #f44336;
    color: white;
}

.grammar-choices {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    max-width: 500px;
}

.grammar-word-btn {
    padding: 12px 20px;
    font-size: 1.1rem;
    font-weight: bold;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.3s ease;
    min-width: 60px;
}

.grammar-word-btn:hover:not(:disabled) {
    transform: translateY(-3px);
    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
}

.grammar-word-btn:active:not(:disabled) {
    transform: translateY(0);
}

.grammar-word-btn.selected {
    opacity: 0.4;
    transform: scale(0.9);
}

.grammar-word-btn:disabled {
    cursor: not-allowed;
}

.grammar-submit-btn {
    padding: 15px 40px;
    font-size: 1.2rem;
    font-weight: bold;
    cursor: pointer;
    border: none;
    border-radius: 15px;
    transition: all 0.3s ease;
    margin-top: 10px;
}

.grammar-submit-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Albert grammar styly */
body.albert .grammar-card {
    background: linear-gradient(180deg, #C4A87C 0%, #A08050 100%);
    border: 6px solid #5C4033;
    box-shadow:
        inset 3px 3px 0 #D4B88C,
        inset -3px -3px 0 #8A6D4B;
}

body.albert .grammar-czech {
    color: #2B2B2B;
    text-shadow: 1px 1px 0 #D4B88C;
}

body.albert .grammar-label {
    color: #5C4033;
}

body.albert .grammar-word-btn {
    background: linear-gradient(180deg, #8B7355 0%, #6B5344 100%);
    color: white;
    border: 3px solid #5C4033;
}

body.albert .grammar-word-btn:hover:not(:disabled) {
    background: linear-gradient(180deg, #9B8365 0%, #7B6354 100%);
}

body.albert .grammar-selected-word {
    background: linear-gradient(180deg, #8B7355 0%, #6B5344 100%);
    color: white;
}

body.albert .grammar-selected {
    background: rgba(139,115,85,0.2);
    border: 2px solid rgba(139,115,85,0.3);
}

body.albert .grammar-submit-btn {
    background: linear-gradient(180deg, #4CAF50 0%, #2E7D32 100%);
    border: 3px solid #1B5E20;
    color: white;
    text-shadow: 1px 1px 0 #1B5E20;
}

body.albert .grammar-submit-btn:hover:not(:disabled) {
    background: linear-gradient(180deg, #66BB6A 0%, #43A047 100%);
    transform: scale(1.02);
}

/* Stella grammar styly */
body.stella .grammar-card {
    background: linear-gradient(180deg,
        rgba(255,255,255,0.9) 0%,
        rgba(255,228,225,0.85) 100%);
    border: 3px solid #FFB6C1;
    border-radius: 25px;
    box-shadow: 0 4px 15px rgba(255,182,193,0.4);
}

body.stella .grammar-czech {
    color: #006994;
}

body.stella .grammar-label {
    color: #006994;
}

body.stella .grammar-word-btn {
    background: linear-gradient(180deg, #FF69B4 0%, #DB7093 100%);
    color: white;
    border: 3px solid #C71585;
}

body.stella .grammar-word-btn:hover:not(:disabled) {
    background: linear-gradient(180deg, #FF79C4 0%, #EB80A3 100%);
}

body.stella .grammar-selected-word {
    background: linear-gradient(180deg, #FF69B4 0%, #DB7093 100%);
    color: white;
}

body.stella .grammar-selected {
    background: rgba(255,105,180,0.2);
    border: 2px solid rgba(255,105,180,0.3);
}

body.stella .grammar-submit-btn {
    background: linear-gradient(180deg, #90EE90 0%, #32CD32 100%);
    border: 3px solid #FFD700;
    color: white;
    font-family: 'Georgia', serif;
    font-style: italic;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.3);
}

body.stella .grammar-submit-btn:hover:not(:disabled) {
    background: linear-gradient(180deg, #98FB98 0%, #3CB371 100%);
    transform: scale(1.02);
}

/* Grammar feedback */
#grammar-feedback {
    position: fixed;
    bottom: 80px;
    left: 50%;
    transform: translateX(-50%);
    padding: 15px 30px;
    font-size: 1.3rem;
    font-weight: bold;
    border-radius: 10px;
    z-index: 100;
    max-width: 90%;
    text-align: center;
}

#grammar-feedback.correct {
    background: #4CAF50;
    color: white;
}

#grammar-feedback.wrong {
    background: #f44336;
    color: white;
}

/* ==================== */
/* FEEDBACK CLOSE BUTTON */
/* ==================== */

.feedback-close {
    cursor: pointer;
    margin-left: 15px;
    font-size: 1.3em;
    opacity: 0.8;
    transition: opacity 0.2s, transform 0.2s;
    display: inline-block;
    vertical-align: middle;
}

.feedback-close:hover {
    opacity: 1;
    transform: scale(1.2);
}

/* ==================== */
/* TYPING GAME - Hra na psaní */
/* ==================== */

#typing-game-screen {
    padding: 20px;
    max-width: 800px;
    width: 100%;
    height: auto;
    min-height: auto;
}

.typing-game-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 20px;
    background: rgba(0, 0, 0, 0.2);
    width: 100%;
    border-radius: 15px 15px 0 0;
}

.typing-game-header #typing-game-score {
    font-size: 1.5rem;
    font-weight: bold;
}

.typing-game-container {
    display: flex;
    flex-direction: column;
    width: 100%;
    position: relative;
    border-radius: 0 0 15px 15px;
    overflow: hidden;
}

#typing-game-canvas {
    width: 100%;
    height: 320px;
    display: block;
}

.typing-game-input-area {
    padding: 15px 20px 30px;
    background: rgba(0, 0, 0, 0.3);
}

#typing-game-input {
    width: 100%;
    padding: 15px 20px;
    font-size: 1.2rem;
    border: none;
    border-radius: 25px;
    outline: none;
    text-align: center;
}

/* Albert verze */
body.albert #typing-game-input {
    background: #8B7355;
    color: #fff;
    border: 4px solid #5D4E37;
    font-family: 'Courier New', monospace;
}

body.albert #typing-game-input::placeholder {
    color: rgba(255, 255, 255, 0.6);
}

body.albert .typing-game-header {
    background: rgba(93, 78, 55, 0.9);
}

body.albert .typing-game-input-area {
    background: rgba(93, 78, 55, 0.9);
}

/* Stella verze */
body.stella #typing-game-input {
    background: linear-gradient(180deg, #e6c4f0 0%, #f0d4f8 100%);
    color: #6b3a7d;
    border: 3px solid #9b59b6;
}

body.stella #typing-game-input::placeholder {
    color: rgba(107, 58, 125, 0.6);
}

body.stella .typing-game-header {
    background: rgba(75, 40, 90, 0.8);
}

body.stella .typing-game-input-area {
    background: rgba(75, 40, 90, 0.8);
}

/* Overlay pro game over */
.typing-game-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.8);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 100;
}

.typing-game-message {
    background: white;
    padding: 40px;
    border-radius: 20px;
    text-align: center;
    max-width: 400px;
}

.typing-game-message h2 {
    font-size: 2rem;
    margin-bottom: 20px;
}

.typing-game-message p {
    font-size: 1.5rem;
    margin-bottom: 30px;
    color: #333;
}

.typing-game-buttons {
    display: flex;
    gap: 15px;
    justify-content: center;
}

.typing-game-buttons button {
    padding: 12px 25px;
    font-size: 1rem;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    transition: transform 0.2s;
}

.typing-game-buttons button:hover {
    transform: scale(1.05);
}

body.albert .typing-game-message {
    background: #8B7355;
    border: 4px solid #5D4E37;
    color: #fff;
}

body.albert .typing-game-message p {
    color: #fff;
}

body.albert .typing-game-buttons button {
    background: #6AAF50;
    color: #fff;
    border: 3px solid #4A8030;
}

body.albert .typing-game-buttons button:hover {
    background: #5A9F40;
}

body.stella .typing-game-message {
    background: linear-gradient(180deg, #e6c4f0 0%, #f0d4f8 100%);
    border: 3px solid #9b59b6;
    color: #6b3a7d;
}

body.stella .typing-game-message p {
    color: #6b3a7d;
}

body.stella .typing-game-buttons button {
    background: linear-gradient(180deg, #9b59b6 0%, #8e44ad 100%);
    color: #fff;
    border: none;
}

body.stella .typing-game-buttons button:hover {
    background: linear-gradient(180deg, #8e44ad 0%, #7d3c98 100%);
}