:root {
            --gold-primary: #d4af37;
            --gold-secondary: #aa8c2c;
            --dark-brown: #3a2a1d;
            --light-brown: #8c7054;
            --background: #f0e6d2;
            --player-color: #3498db;
            --enemy-color: #e74c3c;
            --neutral-color: #95a5a6;
        }
        
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            -webkit-touch-callout: none;
        }
        
        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            /* Version 2.0.3.10: Hintergrundbild für ganze Seite */
            background: url('../../../assets/backgrounds/page-bg.png') center/cover no-repeat, var(--background);
            overflow: hidden;
            position: fixed;
            width: 100%;
            height: 100%;
            color: var(--dark-brown);
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
            /* touch-action: none; entfernt */
            /* user-select: none; entfernt */
        }
        
        #game-container {
            width: 100%;
            height: 100%;
            position: relative;
            overflow: hidden;
            display: none; /* Initially hidden until game starts */
            background: #fff !important;
        }
        
        #start-screen {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: url('../../../assets/backgrounds/start-bg.png') center center / cover no-repeat;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: flex-start;
            z-index: 100;
            color: var(--gold-primary);
            text-align: center;
            padding: 20px;
        }

        .start-title-container {
            margin-top: 35vh; /* Version 2.0.3.14: Überschrift etwas weiter über der Mitte */
            margin-bottom: 2.5rem;
            width: 100%;
        }

        /* Prachtvolle mittelalterliche Titelgestaltung */
        .game-title {
            font-size: 6.5rem;
            font-family: 'Cinzel', 'Times New Roman', serif;
            font-weight: 700;
            color: #e8d4a4;
            text-shadow: 0 2px 5px rgba(0,0,0,0.7), 0 5px 15px rgba(0,0,0,0.4);
            position: relative;
            display: inline-block;
            padding: 0 30px;
            margin-bottom: 10px;
            letter-spacing: 0.05em;
            transform: scale(1);
            animation: title-entrance 1.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
        }

        .game-title::before, 
        .game-title::after {
            content: "";
            position: absolute;
            width: 100%;
            height: 100%;
            top: 0;
            left: 0;
            background-repeat: no-repeat;
            background-size: 100% 100%;
            opacity: 0;
            animation: ornament-fade 1.8s ease-out 0.5s forwards;
        }

        .game-title::before {
            background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiPjxkZWZzPjxmaWx0ZXIgaWQ9ImYxIiB4PSIwIiB5PSIwIj48ZmVDb2xvck1hdHJpeCB0eXBlPSJtYXRyaXgiIHZhbHVlcz0iMCAwIDAgMCAwLjkgMCAwIDAgMCAwLjcgMCAwIDAgMCAwLjMgMCAwIDAgMSAwIi8+PC9maWx0ZXI+PC9kZWZzPjxnIG9wYWNpdHk9IjAuNiIgZmlsdGVyPSJ1cmwoI2YxKSI+PHBhdGggZmlsbD0ibm9uZSIgc3Ryb2tlPSIjZDRhZjM3IiBzdHJva2Utd2lkdGg9IjEuNSIgc3Ryb2tlLWRhc2hhcnJheT0iMSwgMiIgZD0iTTAgNTAgQzAgMjIuNCwyMi40IDAsNTAgMCBDNzcuNiAwLDEwMCAyMi40LDEwMCA1MCBDMTA2IDYwLDk1IDk1LDUwIDEwMCBDMjIuNCAxMDAsMCA3Ny42LDAgNTAgWiIvPjwvZz48L3N2Zz4=');
            transform: scale(1.1) translateY(-5px);
        }

        .game-title::after {
            background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiPjxnIG9wYWNpdHk9IjAuOCI+PHBhdGggZmlsbD0ibm9uZSIgc3Ryb2tlPSIjZDRhZjM3IiBzdHJva2Utd2lkdGg9IjEuNSIgZD0iTTUgNTAgTDIwIDIwIEw4MCAyMCBMOTUgNTAgTDgwIDgwIEwyMCA4MCBaIi8+PGNpcmNsZSBjeD0iNTAiIGN5PSI1MCIgcj0iNDAiIGZpbGw9Im5vbmUiIHN0cm9rZT0iI2Q0YWYzNyIgc3Ryb2tlLXdpZHRoPSIxLjIiIHN0cm9rZS1kYXNoYXJyYXk9IjMsIDMiLz48L2c+PC9zdmc+');
            transform: scale(1.1);
        }

        .game-title.glow {
            animation: 
                title-entrance 1.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards,
                title-shimmer 8s ease-in-out 2s infinite alternate;
        }

        @keyframes title-entrance {
            0% {
                opacity: 0;
                transform: translateY(-20px) scale(0.95);
                text-shadow: 0 0 10px rgba(0,0,0,0.7), 0 0 20px rgba(0,0,0,0.5);
            }
            100% {
                opacity: 1;
                transform: translateY(0) scale(1);
                text-shadow: 
                    0 2px 5px rgba(0,0,0,0.7), 
                    0 5px 15px rgba(0,0,0,0.4),
                    0 0 30px rgba(212, 175, 55, 0.3),
                    0 0 60px rgba(212, 175, 55, 0.2);
            }
        }

        @keyframes ornament-fade {
            0% { opacity: 0; transform: scale(1.2); }
            100% { opacity: 0.7; transform: scale(1); }
        }

        @keyframes title-shimmer {
            0%, 10% {
                color: #e8d4a4;
                text-shadow: 
                    0 2px 5px rgba(0,0,0,0.7), 
                    0 5px 15px rgba(0,0,0,0.4),
                    0 0 30px rgba(212, 175, 55, 0.3),
                    0 0 60px rgba(212, 175, 55, 0.2);
            }
            40%, 60% {
                color: #f0e6b2;
                text-shadow: 
                    0 2px 5px rgba(0,0,0,0.7), 
                    0 5px 15px rgba(0,0,0,0.4),
                    0 0 30px rgba(212, 175, 55, 0.5),
                    0 0 60px rgba(212, 175, 55, 0.3),
                    0 0 90px rgba(212, 175, 55, 0.2);
            }
            90%, 100% {
                color: #e8d4a4;
                text-shadow: 
                    0 2px 5px rgba(0,0,0,0.7), 
                    0 5px 15px rgba(0,0,0,0.4),
                    0 0 30px rgba(212, 175, 55, 0.3),
                    0 0 60px rgba(212, 175, 55, 0.2);
            }
        }

        .game-subtitle {
            font-family: 'Cormorant Garamond', 'Times New Roman', serif;
            font-size: 1.65rem;
            font-style: italic;
            font-weight: 500;
            position: relative;
            color: #f1e6c0;
            text-shadow: 1px 1px 3px rgba(0,0,0,0.7);
            max-width: 800px;
            line-height: 1.4;
            margin-bottom: 20px;
            padding: 5px 25px;
            opacity: 0;
            transform: translateY(10px);
            animation: subtitle-fade 1.2s ease-out 0.7s forwards;
        }

        .game-subtitle::before,
        .game-subtitle::after {
            content: "";
            position: absolute;
            height: 1px;
            background: linear-gradient(90deg, 
                transparent 0%, 
                rgba(212, 175, 55, 0.3) 20%, 
                rgba(212, 175, 55, 0.7) 50%, 
                rgba(212, 175, 55, 0.3) 80%, 
                transparent 100%);
            width: 80%;
            left: 10%;
            opacity: 0;
            animation: line-fade 1.5s ease 1.2s forwards;
        }

        .game-subtitle::before {
            top: 0;
        }

        .game-subtitle::after {
            bottom: 0;
        }

        @keyframes subtitle-fade {
            0% {
                opacity: 0;
                transform: translateY(10px);
            }
            100% {
                opacity: 1;
                transform: translateY(0);
            }
        }

        @keyframes line-fade {
            0% {
                opacity: 0;
                width: 0;
                left: 50%;
            }
            100% {
                opacity: 1;
                width: 80%;
                left: 10%;
            }
        }

        .version-info {
            position: absolute;
            bottom: 32px;
            left: 0;
            width: 100%;
            text-align: center;
            color: #fff;
            font-size: 0.9rem;
            text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
        }
        .dev-note {
            position: absolute;
            bottom: 8px;
            left: 0;
            width: 100%;
            text-align: center;
            color: rgba(255,255,255,0.4);
            font-size: 0.85rem;
            letter-spacing: 0.04em;
            pointer-events: none;
            user-select: none;
        }

        .menu-container {
            display: flex;
            flex-direction: column;
            gap: 1rem;
            width: 100%;
            max-width: 400px;
            /* Version 2.0.3.8: Menü etwas über dem unteren Rand */
            position: absolute;
            left: 50%;
            transform: translateX(-50%);
            bottom: 18vh;
        }

        .menu-button {
            background: linear-gradient(to bottom, var(--gold-primary), var(--gold-secondary));
            border: 2px solid var(--dark-brown);
            color: var(--dark-brown);
            padding: 1rem 2rem;
            font-size: 1.2rem;
            font-weight: bold;
            border-radius: 8px;
            cursor: pointer;
            transition: all 0.3s ease;
            text-transform: uppercase;
            letter-spacing: 0.1em;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
        }

        .menu-button:hover {
            transform: translateY(-2px);
            box-shadow: 0 6px 8px rgba(0, 0, 0, 0.4);
            background: linear-gradient(to bottom, var(--gold-secondary), var(--gold-primary));
        }

        .menu-button:active {
            transform: translateY(1px);
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
        }

        @keyframes glow {
            from { text-shadow: 0 0 10px rgba(212, 175, 55, 0.5), 0 0 20px rgba(212, 175, 55, 0.3), 0 0 30px rgba(212, 175, 55, 0.2); }
            to { text-shadow: 0 0 15px rgba(212, 175, 55, 0.6), 0 0 25px rgba(212, 175, 55, 0.4), 0 0 35px rgba(212, 175, 55, 0.3); }
        }

        @media (max-width: 768px) {
            .game-title { font-size: 3.5rem; } /* vorher 3rem */
            .game-subtitle { font-size: 1.2rem; padding: 0 1rem; }
            .menu-button { padding: 0.8rem 1.5rem; font-size: 1rem; }
        }
        @media (max-width: 600px) {
            .start-title-container { margin-top: 4vh; margin-bottom: 1.2rem; }
            .game-title { font-size: 2.8rem; } /* vorher 2.2rem */
            .game-subtitle { font-size: 1rem; padding: 0 0.5rem; }
            .menu-button { padding: 1.1rem 1.2rem; font-size: 1.1rem; border-radius: 12px; }
            #top-bar { height: 44px; font-size: 1rem; padding: 0 7px; }
            #options-modal, #highscore-modal, #credits-modal { padding: 18px 6vw 12px 6vw; min-width: 0; font-size: 1.05em; }
            #options-modal h2, #highscore-modal h2, #credits-modal h2 { font-size: 1.15em; }
            .option-row, .highscore-entry { font-size: 1em; }
            .close-button { padding: 10px 12px; font-size: 1em; border-radius: 10px; }
            #pause-btn {
                font-size: 1em;
                padding: 10px 18px;
                border-radius: 10px;
            }
        }
        @media (max-width: 400px) {
            .game-title { font-size: 1.8rem; } /* vorher 1.3rem */
            .menu-button { font-size: 0.95rem; padding: 0.7rem 0.7rem; }
            #options-modal, #highscore-modal, #credits-modal { 
                padding: 10px 2vw 8px 2vw; 
                font-size: 0.98em; 
            }
            #highscore-modal {
                top: 0 !important;
                margin-top: 0 !important;
                border-top: none;
                border-radius: 0 0 16px 16px;
                padding-top: 8px;
                max-height: 99vh !important;
            }
            .highscore-list {
                max-height: 85vh !important;
                padding: 0 2px;
            }
            .highscore-entry {
                padding: 3px 5px;
                font-size: 0.92em;
            }
            .close-button { font-size: 0.95em; }
        }
        
        canvas {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: #fff !important;
            touch-action: none;
            user-select: none;
        }
        
        #ui-layer {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            pointer-events: none;
            z-index: 10;
            touch-action: none;
        }
        
        #top-bar {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 55px;
            background: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiPjxkZWZzPjxwYXR0ZXJuIGlkPSJwYXR0ZXJuIiBwYXR0ZXJuVW5pdHM9InVzZXJTcGFjZU9uVXNlIiB3aWR0aD0iMTAwIiBoZWlnaHQ9IjEwMCI+PHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEwMCIgaGVpZ2h0PSIxMDAiIGZpbGw9InJnYmEoNTgsIDQyLCAyOSwgMC43NSkiLz48cGF0aCBkPSJNLTI1IDUwIGw1MCAtMjUgbDUwIDI1IGw1MCAtMjUgbDUwIDI1IiBzdHJva2U9InJnYmEoMjEyLCAxNzUsIDU1LCAwLjEpIiBzdHJva2Utd2lkdGg9IjAuNSIgZmlsbD0ibm9uZSIvPjwvcGF0dGVybj48L2RlZnM+PHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0idXJsKCNwYXR0ZXJuKSIvPjwvc3ZnPg==');
            color: var(--gold-primary);
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 0 15px;
            border-bottom: 2px solid var(--gold-primary);
            backdrop-filter: blur(5px);
            -webkit-backdrop-filter: blur(5px);
            box-shadow: 0 4px 15px 0 rgba(0,0,0,0.25);
            font-family: 'Cinzel', 'Times New Roman', serif;
            z-index: 100;
            position: relative;
        }
        
        #top-bar::after {
            content: '';
            position: absolute;
            left: 0;
            right: 0;
            bottom: -2px;
            height: 1px;
            background: linear-gradient(90deg, 
                transparent 0%, 
                rgba(212, 175, 55, 0.2) 20%, 
                rgba(212, 175, 55, 0.4) 50%, 
                rgba(212, 175, 55, 0.2) 80%, 
                transparent 100%);
        }
        
        .resource-display {
            display: flex;
            align-items: center;
            gap: 8px;
            background: rgba(0, 0, 0, 0.2);
            padding: 5px 10px;
            border-radius: 20px;
            border: 1px solid rgba(212, 175, 55, 0.3);
            box-shadow: inset 0 0 8px rgba(0, 0, 0, 0.2);
        }
        
        .gold-icon {
            width: 22px;
            height: 22px;
            background: radial-gradient(circle, var(--gold-primary) 30%, #ffe082 70%);
            border-radius: 50%;
            border: 1px solid var(--gold-secondary);
            box-shadow: 0 2px 4px rgba(0,0,0,0.3), inset 0 0 3px 1px rgba(255, 255, 255, 0.6);
            position: relative;
            overflow: hidden;
        }
        
        .gold-icon::after {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 60%;
            height: 40%;
            background: linear-gradient(135deg, rgba(255,255,255,0.7) 0%, rgba(255,255,255,0.1) 100%);
            transform: rotate(-45deg) translateY(-50%);
        }
        
        .resource-value {
            font-weight: bold;
            font-size: 1.2em;
            text-shadow: 0 1px 2px rgba(0,0,0,0.5);
            letter-spacing: 0.03em;
            color: #f5e6c5;
        }
        
        /* Nationsemblem in der Top-Bar */
        .nation-emblem {
            display: flex;
            align-items: center;
            gap: 8px;
            background: rgba(0, 0, 0, 0.2);
            padding: 5px 10px;
            border-radius: 20px;
            border: 1px solid rgba(212, 175, 55, 0.3);
            box-shadow: inset 0 0 8px rgba(0, 0, 0, 0.2);
            margin-left: 10px;
        }
        
        .nation-icon {
            font-size: 18px;
            filter: drop-shadow(0 1px 2px rgba(0,0,0,0.5));
        }
        
        .nation-name {
            font-size: 0.9em;
            color: #f5e6c5;
            font-family: 'Cinzel', serif;
            text-shadow: 0 1px 2px rgba(0,0,0,0.5);
            white-space: nowrap;
        }
        
        @media (max-width: 600px) {
            .nation-name {
                display: none; /* Auf kleinen Bildschirmen nur das Icon anzeigen */
            }
            
            .nation-emblem {
                padding: 5px;
            }
        }
        
        .top-bar-controls {
            display: flex;
            align-items: center;
            gap: 10px;
        }
        
        /* Einheiten-Feedback Animation v2.4.1 */
        .unit-send-feedback {
            position: absolute;
            width: 30px;
            height: 30px;
            border-radius: 50%;
            display: flex;
            justify-content: center;
            align-items: center;
            transform: translate(-50%, -50%) scale(0.5);
            opacity: 0;
            color: white;
            font-weight: bold;
            pointer-events: none;
            z-index: 100;
            transition: all 0.3s ease-out;
            box-shadow: 0 0 10px rgba(255,255,255,0.7);
        }
        
        .unit-send-feedback span {
            font-size: 18px;
        }
        
        .unit-send-feedback.active {
            transform: translate(-50%, -80%) scale(1);
            opacity: 1;
            animation: feedback-fade 0.8s ease-out forwards;
        }
        
        @keyframes feedback-fade {
            0% { transform: translate(-50%, -50%) scale(0.5); opacity: 0; }
            20% { transform: translate(-50%, -80%) scale(1); opacity: 1; }
            80% { transform: translate(-50%, -100%) scale(1); opacity: 0.9; }
            100% { transform: translate(-50%, -120%) scale(0.8); opacity: 0; }
        }
        
        #game-over {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.85);
            display: none;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            color: white;
            pointer-events: all;
            backdrop-filter: blur(8px);
            -webkit-backdrop-filter: blur(8px);
            z-index: 100;
        }
        
        #game-over::before {
            content: '';
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: min(500px, 90vw);
            height: min(400px, 70vh);
            background: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiPjxkZWZzPjxwYXR0ZXJuIGlkPSJwYXR0ZXJuIiBwYXR0ZXJuVW5pdHM9InVzZXJTcGFjZU9uVXNlIiB3aWR0aD0iMTAwIiBoZWlnaHQ9IjEwMCI+PHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEwMCIgaGVpZ2h0PSIxMDAiIGZpbGw9InJnYmEoNTgsIDQyLCAyOSwgMC45MykiLz48cGF0aCBkPSJNLTI1IDUwIGw1MCAtMjUgbDUwIDI1IGw1MCAtMjUgbDUwIDI1IiBzdHJva2U9InJnYmEoMjEyLCAxNzUsIDU1LCAwLjE1KSIgc3Ryb2tlLXdpZHRoPSIwLjUiIGZpbGw9Im5vbmUiLz48L3BhdHRlcm4+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjcGF0dGVybikiLz48L3N2Zz4=');
            border-radius: 20px;
            border: 5px solid #8B4513;
            box-shadow: 0 8px 25px rgba(0, 0, 0, 0.5), inset 0 0 60px rgba(139, 69, 19, 0.3);
            z-index: -1;
        }
        
        #game-over .medieval-shield {
            width: 80px;
            height: 90px;
            background: radial-gradient(circle, #7a0000 0%, #500000 100%);
            position: relative;
            margin-bottom: 15px;
            clip-path: polygon(50% 0%, 100% 0%, 100% 65%, 50% 100%, 0% 65%, 0% 0%);
            border: 3px solid var(--gold-primary);
            display: flex;
            align-items: center;
            justify-content: center;
            margin-bottom: 10px;
        }
        
        #game-over .medieval-shield::before {
            content: '⚔';
            color: var(--gold-primary);
            font-size: 2.2rem;
            text-shadow: 0 1px 3px rgba(0,0,0,0.6);
        }
        
        #game-over h2.medieval-title {
            font-family: 'Cinzel', 'Times New Roman', serif;
            font-size: 2.5em;
            color: var(--gold-primary);
            text-shadow: 0 2px 6px rgba(0,0,0,0.7);
            margin-bottom: 18px;
            letter-spacing: 0.05em;
        }
        
        #game-over p.royal-message {
            font-family: 'Cormorant Garamond', 'Georgia', serif;
            font-size: 1.3em;
            color: #f5e6c5;
            text-shadow: 0 1px 3px rgba(0,0,0,0.5);
            margin-bottom: 20px;
            text-align: center;
            max-width: 80%;
        }
        
        #game-over p.wave-counter {
            font-size: 1.3em;
            color: var(--gold-primary);
            margin: 12px 0 20px;
            font-family: 'Cinzel', 'Times New Roman', serif;
            text-shadow: 0 1px 3px rgba(0,0,0,0.5);
        }
        
        #restart-button {
            background: linear-gradient(to bottom, var(--gold-primary), var(--gold-secondary));
            color: var(--dark-brown);
            border: 2px solid rgba(139, 69, 19, 0.7);
            padding: 16px 36px;
            font-size: 1.3em;
            border-radius: 12px;
            cursor: pointer;
            margin-top: 25px;
            pointer-events: all;
            font-weight: bold;
            box-shadow: 0 4px 12px rgba(0,0,0,0.4), 0 0 20px rgba(212, 175, 55, 0.25);
            transition: all 0.25s ease;
            font-family: 'Cinzel', 'Times New Roman', serif;
            position: relative;
            overflow: hidden;
            letter-spacing: 0.05em;
            text-transform: uppercase;
        }
        
        #restart-button::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 70%;
            height: 100%;
            background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,0.3) 50%, rgba(255,255,255,0) 100%);
            transform: skewX(-25deg);
            transition: left 0.75s ease;
        }
        
        #restart-button:hover {
            transform: translateY(-4px) scale(1.03);
            box-shadow: 0 8px 16px rgba(0,0,0,0.45), 0 0 30px rgba(212, 175, 55, 0.3);
            background: linear-gradient(to bottom, #ffe082, var(--gold-primary));
            border-color: rgba(212, 175, 55, 0.8);
        }
        
        #restart-button:hover::before {
            left: 130%;
        }
        
        /* Responsive Anpassungen für den Restart-Button auf mobilen Geräten */
        @media (max-width: 600px) {
            #restart-button {
                padding: 14px 28px;
                font-size: 1.2em;
                max-width: 80%;
                margin-left: auto;
                margin-right: auto;
            }
        }
        
        @media (max-width: 400px) {
            #restart-button {
                padding: 12px 24px;
                font-size: 1.1em;
                width: 85%;
            }
        }
        
        #info-panel {
            position: absolute;
            bottom: 15px;
            left: 15px;
            background-color: rgba(58, 42, 29, 0.9);
            color: var(--gold-primary);
            padding: 12px;
            border-radius: 8px;
            border: 1px solid var(--gold-secondary);
            font-size: 0.9em;
            max-width: 80%;
            backdrop-filter: blur(5px);
            -webkit-backdrop-filter: blur(5px);
            box-shadow: 0 3px 8px rgba(0,0,0,0.3);
        }
        
        /* Kreisförmiges Aktionsmenü im mittelalterlichen Stil - statisches Design (v2.6.21) */
        .tower-menu {
            position: absolute;
            display: none;
            z-index: 100;
            width: 180px;
            height: 180px;
            transform-origin: center;
            pointer-events: none; /* Verhindert, dass das Menü Canvas-Events blockiert */
        }
        
        /* Einzelne Buttons im Menü müssen aber anklickbar bleiben */
        .tower-action-circle {
            pointer-events: auto;
        }
        
        .tower-action-circle {
            position: absolute;
            width: 50px;
            height: 50px;
            border-radius: 50%;
            background: radial-gradient(circle, var(--gold-primary) 0%, var(--gold-secondary) 100%);
            display: flex;
            justify-content: center;
            align-items: center;
            cursor: pointer;
            box-shadow: 0 2px 10px rgba(0,0,0,0.4), inset 0 0 15px rgba(255,255,255,0.3);
            border: 2px solid #8B4513;
            filter: drop-shadow(0 0 3px rgba(212, 175, 55, 0.5));
            font-weight: bold;
            color: var(--dark-brown);
            text-shadow: 0 1px 1px rgba(255,255,255,0.3);
            user-select: none;
            transition: transform 0.15s ease; /* Kürzere, einfachere Animation */
            transform: scale(1); /* Immer sichtbar, keine Einstiegsanimation */
        }
        
        .tower-action-circle:hover, .tower-action-circle:active {
            transform: scale(1.15) !important;
            box-shadow: 0 3px 12px rgba(0,0,0,0.5), inset 0 0 20px rgba(255,255,255,0.4);
        }
        
        /* Positionierung der Aktionsschaltflächen um den Turm */
        #upgrade-action {
            top: -60px;
            left: 65px;
            background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9IiMzYTJhMWQiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj48cG9seWxpbmUgcG9pbnRzPSIxOCAxNSAxMiA5IDYgMTUiPjwvcG9seWxpbmU+PC9zdmc+');
            background-position: center;
            background-repeat: no-repeat;
            background-size: 24px;
        }
        
        /* Send action removed in v2.6.24 */
        
        #cancel-action {
            top: 65px;
            left: 65px;
            background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9IiMzYTJhMWQiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj48bGluZSB4MT0iMTgiIHkxPSI2IiB4Mj0iNiIgeTI9IjE4Ij48L2xpbmU+PGxpbmUgeDE9IjYiIHkxPSI2IiB4Mj0iMTgiIHkyPSIxOCI+PC9saW5lPjwvc3ZnPg==');
            background-position: center;
            background-repeat: no-repeat;
            background-size: 24px;
        }
        
        /* Kostenanzeige für Upgrade - immer sichtbar */
        .cost-indicator {
            position: absolute;
            top: -25px;
            left: 50%;
            transform: translateX(-50%);
            background: rgba(58, 42, 29, 0.95);
            color: var(--gold-primary);
            padding: 3px 8px;
            border-radius: 10px;
            font-size: 0.8rem;
            white-space: nowrap;
            border: 1px solid var(--gold-secondary);
            box-shadow: 0 2px 5px rgba(0,0,0,0.3);
            pointer-events: none;
            opacity: 1; /* Immer sichtbar */
        }
        
        /* Mittelalterliche dekorative Elemente für das Aktionsmenü */
        .action-ornament {
            position: absolute;
            width: 40px;
            height: 40px;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            border-radius: 50%;
            border: 2px dotted rgba(212, 175, 55, 0.3);
            pointer-events: none;
            /* Keine Rotation-Animation mehr */
        }
        
        /* Anpassungen für mobile Geräte */
        @media (max-width: 600px) {
            .tower-action-circle {
                width: 50px;
                height: 50px;
                /* Verbesserte Sichtbarkeit auf Mobilgeräten */
                border: 3px solid #8B4513;
                box-shadow: 0 2px 6px rgba(0,0,0,0.6), inset 0 0 12px rgba(255,255,255,0.4);
            }
            
            /* Bessere Kostendarstellung */
            .cost-indicator {
                font-weight: bold;
                padding: 3px 9px;
                font-size: 0.9rem;
                border: 1.5px solid var(--gold-secondary);
            }
        }
        
        #credits-modal, #legends-modal {
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            background: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiPjxkZWZzPjxwYXR0ZXJuIGlkPSJwYXR0ZXJuIiBwYXR0ZXJuVW5pdHM9InVzZXJTcGFjZU9uVXNlIiB3aWR0aD0iMTAwIiBoZWlnaHQ9IjEwMCI+PHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEwMCIgaGVpZ2h0PSIxMDAiIGZpbGw9InJnYmEoNTgsIDQyLCAyOSwgMC45NSkiLz48cGF0aCBkPSJNLTI1IDUwIGw1MCAtMjUgbDUwIDI1IGw1MCAtMjUgbDUwIDI1IiBzdHJva2U9InJnYmEoMjEyLCAxNzUsIDU1LCAwLjE1KSIgc3Ryb2tlLXdpZHRoPSIwLjUiIGZpbGw9Im5vbmUiLz48L3BhdHRlcm4+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjcGF0dGVybikiLz48L3N2Zz4=');
            color: white;
            padding: 42px 36px 36px 36px;
            border-radius: 16px;
            border: 5px solid #8B4513;
            max-width: 700px;
            width: 90vw;
            max-height: 80vh;
            overflow-y: auto;
            z-index: 1000;
            display: none;
            box-shadow: 0 8px 25px rgba(0, 0, 0, 0.5), inset 0 0 60px rgba(139, 69, 19, 0.3);
            backdrop-filter: blur(10px);
            -webkit-backdrop-filter: blur(10px);
            touch-action: pan-y; /* Allows vertical scrolling on touch devices */
            -webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS */
            user-select: text;
            position: relative;
            overscroll-behavior: contain; /* Prevents scroll chaining on mobile */
        }
        
        #credits-modal::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            border-radius: 11px;
            box-shadow: inset 0 0 15px 3px rgba(139, 69, 19, 0.5);
            z-index: -1;
            pointer-events: none;
        }
        
        #legends-modal::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            border-radius: 11px;
            box-shadow: inset 0 0 15px 3px rgba(139, 69, 19, 0.5);
            z-index: -1;
            pointer-events: none;
        }
        
        #legends-modal h2 {
            font-family: 'Cinzel', 'Times New Roman', serif;
            color: var(--gold-primary);
            margin-bottom: 22px;
            font-size: 1.8em;
            text-align: center;
            text-shadow: 0 2px 4px rgba(0,0,0,0.4);
            letter-spacing: 0.05em;
            position: relative;
        }
        
        #legends-modal h2::after {
            content: '';
            position: absolute;
            bottom: -10px;
            left: 50%;
            transform: translateX(-50%);
            width: 80%;
            height: 1px;
            background: linear-gradient(90deg, 
                transparent 0%, 
                rgba(212, 175, 55, 0.3) 20%, 
                rgba(212, 175, 55, 0.7) 50%, 
                rgba(212, 175, 55, 0.3) 80%, 
                transparent 100%);
        }
        
        .legends-intro {
            font-family: 'Cormorant Garamond', 'Georgia', serif;
            margin-bottom: 20px;
            line-height: 1.5;
            font-size: 1.2em;
            text-align: center;
            color: #f5e6c5;
        }
        
        .legends-selection {
            display: flex;
            flex-direction: column;
            gap: 12px;
            margin-bottom: 25px;
        }
        
        .legend-button {
            background: linear-gradient(to right, rgba(212,175,55,0.3), rgba(212,175,55,0.1));
            color: #f5e6c5;
            padding: 12px 18px;
            border: 1px solid rgba(212, 175, 55, 0.4);
            border-radius: 8px;
            font-family: 'Cinzel', 'Times New Roman', serif;
            font-size: 1.1em;
            font-weight: bold;
            text-align: left;
            cursor: pointer;
            transition: all 0.3s ease;
            display: flex;
            align-items: center;
        }
        
        .legend-button:hover {
            background: linear-gradient(to right, rgba(212,175,55,0.5), rgba(212,175,55,0.2));
            transform: translateY(-2px);
            box-shadow: 0 3px 8px rgba(0,0,0,0.3);
        }
        
        .legend-button.active {
            background: linear-gradient(to right, rgba(212,175,55,0.6), rgba(212,175,55,0.3));
            border-color: var(--gold-primary);
            box-shadow: 0 0 15px rgba(212, 175, 55, 0.2);
        }
        
        .legend-icon {
            font-size: 1.3em;
            margin-right: 12px;
        }
        
        .civilization-legend {
            background: rgba(0,0,0,0.2);
            border-radius: 10px;
            padding: 20px;
            margin-bottom: 25px;
            display: none;
            border: 1px solid rgba(212, 175, 55, 0.3);
        }
        
        .civilization-legend h3 {
            font-family: 'Cinzel', 'Times New Roman', serif;
            color: var(--gold-primary);
            margin-bottom: 15px;
            font-size: 1.4em;
            text-shadow: 0 1px 2px rgba(0,0,0,0.4);
            letter-spacing: 0.05em;
            text-align: center;
        }
        
        .civilization-legend p {
            font-family: 'Cormorant Garamond', 'Georgia', serif;
            margin-bottom: 12px;
            line-height: 1.6;
            font-size: 1.1em;
            text-align: justify;
        }
        
        /* Styles für die Legenden-Akkordeon */
        .legends-accordion {
            width: 100%;
            margin: 15px 0 20px 0;
        }
        
        .legend-accordion-item {
            margin-bottom: 10px;
            border-radius: 6px;
            overflow: hidden;
            background: rgba(0,0,0,0.1);
        }
        
        .legend-accordion-title {
            background: linear-gradient(to right, rgba(212,175,55,0.3), rgba(212,175,55,0.1));
            color: #f5e6c5;
            padding: 12px 15px;
            width: 100%;
            text-align: left;
            border: none;
            font-weight: bold;
            font-family: 'Cinzel', serif;
            font-size: 1.1rem;
            cursor: pointer;
            position: relative;
            transition: all 0.3s ease;
            border-radius: 6px;
            display: flex;
            align-items: center;
        }
        
        .legend-accordion-title:hover {
            background: linear-gradient(to right, rgba(212,175,55,0.5), rgba(212,175,55,0.2));
        }
        
        .legend-accordion-title::after {
            content: '+';
            position: absolute;
            right: 15px;
            top: 50%;
            transform: translateY(-50%);
            font-size: 1.2rem;
            transition: transform 0.3s ease;
        }
        
        .legend-accordion-title.active::after {
            content: '−';
            transform: translateY(-50%);
        }
        
        .legend-accordion-panel {
            max-height: 0;
            overflow: hidden;
            transition: max-height 0.4s ease-out, padding 0.3s ease;
            background-color: rgba(0,0,0,0.1);
            border-radius: 0 0 6px 6px;
            padding: 0 15px;
            margin-bottom: 0;
            will-change: max-height, padding;
            -webkit-overflow-scrolling: touch; /* For mobile devices */
            overscroll-behavior: contain; /* Prevent scroll chaining */
        }
        
        .legend-accordion-panel.active {
            max-height: 1000px !important;
            padding: 15px !important;
            overflow-y: auto !important;
            -webkit-overflow-scrolling: touch !important; /* Ensure smooth scrolling on iOS */
            touch-action: pan-y !important; /* Enable vertical touch scrolling */
        }
        
        @media (max-width: 600px) {
            .legend-button {
                padding: 10px 15px;
                font-size: 1em;
            }
            
            .civilization-legend {
                padding: 15px;
                overflow-y: auto;
                -webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS */
                touch-action: pan-y; /* Enable vertical touch scrolling */
                max-height: none; /* Let content extend naturally */
            }
            
            #legends-modal {
                max-height: 80vh;
                width: 95vw;
                padding: 30px 20px 20px 20px;
                overflow-y: auto;
                -webkit-overflow-scrolling: touch;
            }
            
            .civilization-legend h3 {
                font-size: 1.3em;
            }
            
            .legend-accordion-panel.active {
                max-height: 60vh !important; /* Give more space to scroll on mobile */
            }
        }
        
        #credits-modal h2 {
            font-family: 'Cinzel', 'Times New Roman', serif;
            color: var(--gold-primary);
            margin-bottom: 22px;
            font-size: 1.8em;
            text-align: center;
            text-shadow: 0 2px 4px rgba(0,0,0,0.4);
            letter-spacing: 0.05em;
            position: relative;
        }
        
        #credits-modal h2::after {
            content: '';
            position: absolute;
            bottom: -10px;
            left: 50%;
            transform: translateX(-50%);
            width: 80%;
            height: 1px;
            background: linear-gradient(90deg, 
                transparent 0%, 
                rgba(212, 175, 55, 0.3) 20%, 
                rgba(212, 175, 55, 0.7) 50%, 
                rgba(212, 175, 55, 0.3) 80%, 
                transparent 100%);
        }

        #credits-modal h3 {
            font-family: 'Cinzel', 'Times New Roman', serif;
            color: var(--gold-primary);
            margin: 24px 0 12px;
            font-size: 1.3em;
            text-shadow: 0 1px 2px rgba(0,0,0,0.3);
            letter-spacing: 0.03em;
        }

        #credits-modal p {
            font-family: 'Cormorant Garamond', 'Georgia', serif;
            margin-bottom: 15px;
            line-height: 1.6;
            font-size: 1.1em;
        }

        #credits-modal ul {
            margin-bottom: 20px;
            padding-left: 20px;
            font-family: 'Cormorant Garamond', 'Georgia', serif;
            font-size: 1.05em;
        }

        #credits-modal li {
            margin-bottom: 8px;
            line-height: 1.4;
            position: relative;
        }
        
        #credits-modal li::before {
            content: '•';
            color: var(--gold-primary);
            position: absolute;
            left: -15px;
            top: 0;
        }

        #credits-modal .accordion-credits {
            margin-bottom: 20px;
        }
        
        #credits-modal .accordion-item {
            margin-bottom: 10px;
            border-radius: 6px;
            overflow: hidden;
        }
        
        #credits-modal .accordion-title {
            background: linear-gradient(to right, rgba(212,175,55,0.3), rgba(212,175,55,0.1));
            color: #d4af37;
            padding: 10px 15px;
            width: 100%;
            text-align: left;
            border: none;
            font-weight: bold;
            font-family: 'Cinzel', serif;
            font-size: 1.1rem;
            cursor: pointer;
            position: relative;
            transition: all 0.3s ease;
            border-radius: 6px;
            display: flex;
            align-items: center;
        }
        
        #credits-modal .accordion-title:hover {
            background: linear-gradient(to right, rgba(212,175,55,0.5), rgba(212,175,55,0.2));
        }
        
        #credits-modal .accordion-title::after {
            content: '+';
            position: absolute;
            right: 15px;
            top: 50%;
            transform: translateY(-50%);
            font-size: 1.2rem;
            transition: transform 0.3s ease;
        }
        
        #credits-modal .accordion-title.active::after {
            content: '−';
            transform: translateY(-50%);
        }
        
        #credits-modal .accordion-panel {
            max-height: 0;
            overflow: hidden;
            transition: max-height 0.4s ease-out, padding 0.3s ease;
            background-color: rgba(0,0,0,0.1);
            border-radius: 0 0 6px 6px;
            padding: 0 15px;
            margin-bottom: 0;
            will-change: max-height, padding; /* Performance-Optimierung für mobile Geräte */
        }
        
        #credits-modal .accordion-panel.active {
            max-height: 1000px !important; /* Größerer Wert für mehr Inhalte */
            padding: 15px !important;
            overflow-y: auto !important; /* Ermöglicht Scrollen bei langen Inhalten */
        }
        
        /* Nested accordion styles */
        #credits-modal .inner-accordion-credits {
            width: 100%;
            margin: 5px 0 15px 0;
        }
        
        #credits-modal .inner-accordion-item {
            margin-bottom: 8px;
            border-radius: 5px;
            overflow: hidden;
            background: rgba(0,0,0,0.1);
        }
        
        #credits-modal .inner-accordion-title {
            background: linear-gradient(to right, rgba(212,175,55,0.2), rgba(212,175,55,0.05));
            color: #e6c870;
            padding: 8px 15px;
            width: 100%;
            text-align: left;
            border: none;
            font-weight: bold;
            font-family: 'Cinzel', serif;
            font-size: 1rem;
            cursor: pointer;
            position: relative;
            transition: all 0.3s ease;
            border-radius: 5px;
            display: flex;
            align-items: center;
        }
        
        #credits-modal .inner-accordion-title:hover {
            background: linear-gradient(to right, rgba(212,175,55,0.3), rgba(212,175,55,0.1));
        }
        
        #credits-modal .inner-accordion-title::after {
            content: '+';
            position: absolute;
            right: 15px;
            top: 50%;
            transform: translateY(-50%);
            font-size: 1.1rem;
            transition: transform 0.3s ease;
        }
        
        #credits-modal .inner-accordion-title.active::after {
            content: '−';
        }
        
        #credits-modal .inner-accordion-panel {
            max-height: 0;
            overflow: hidden;
            transition: max-height 0.3s ease-out, padding 0.3s ease;
            background-color: rgba(0,0,0,0.05);
            border-radius: 0 0 5px 5px;
            padding: 0 15px;
            margin-bottom: 0;
            will-change: max-height, padding; /* Performance-Optimierung für mobile Geräte */
        }
        
        #credits-modal .inner-accordion-panel.active {
            max-height: 800px !important; /* Größerer Wert für mehr Inhalte */
            padding: 12px 15px !important;
            overflow-y: auto !important; /* Ermöglicht Scrollen bei langen Inhalten */
        }
        
        #credits-modal .version-entry {
            margin-bottom: 12px;
            padding-bottom: 8px;
            border-bottom: 1px solid rgba(212, 175, 55, 0.1);
        }
        
        #credits-modal .version-entry:last-child {
            border-bottom: none;
            margin-bottom: 0;
        }
        
        #credits-modal .version-number {
            color: var(--gold-primary);
            font-weight: bold;
            font-size: 1.05em;
            margin-bottom: 6px;
        }

        #credits-modal .close-button, #legends-modal .close-button {
            background: linear-gradient(to bottom, var(--gold-primary), var(--gold-secondary));
            color: var(--dark-brown);
            border: 1px solid rgba(139, 69, 19, 0.5);
            padding: 12px 28px;
            border-radius: 8px;
            cursor: pointer;
            font-weight: bold;
            font-size: 1.1em;
            display: block;
            margin: 25px auto 0;
            box-shadow: 0 3px 8px rgba(0,0,0,0.3);
            transition: all 0.25s ease;
            font-family: 'Cinzel', 'Times New Roman', serif;
            position: relative;
            overflow: hidden;
            letter-spacing: 0.03em;
        }
        
        #credits-modal .close-button::before, #legends-modal .close-button::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 70%;
            height: 100%;
            background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,0.3) 50%, rgba(255,255,255,0) 100%);
            transform: skewX(-25deg);
            transition: left 0.75s ease;
        }

        #credits-modal .close-button:hover, #legends-modal .close-button:hover {
            transform: translateY(-3px);
            box-shadow: 0 6px 12px rgba(0,0,0,0.45);
            background: linear-gradient(to bottom, #ffe082, var(--gold-primary));
        }
        
        #credits-modal .close-button:hover::before, #legends-modal .close-button:hover::before {
            left: 130%;
        }

        #tutorial {
            display: none;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            background: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiPjxkZWZzPjxwYXR0ZXJuIGlkPSJwYXR0ZXJuIiBwYXR0ZXJuVW5pdHM9InVzZXJTcGFjZU9uVXNlIiB3aWR0aD0iMTAwIiBoZWlnaHQ9IjEwMCI+PHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEwMCIgaGVpZ2h0PSIxMDAiIGZpbGw9InJnYmEoNTgsIDQyLCAyOSwgMC45NSkiLz48cGF0aCBkPSJNLTI1IDUwIGw1MCAtMjUgbDUwIDI1IGw1MCAtMjUgbDUwIDI1IiBzdHJva2U9InJnYmEoMjEyLCAxNzUsIDU1LCAwLjE1KSIgc3Ryb2tlLXdpZHRoPSIwLjUiIGZpbGw9Im5vbmUiLz48L3BhdHRlcm4+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjcGF0dGVybikiLz48L3N2Zz4=');
            color: #f5e6c5;
            padding: 38px 35px 32px 35px;
            border-radius: 16px;
            border: 5px solid #8B4513;
            max-width: 98vw;
            width: 480px;
            min-width: 260px;
            pointer-events: all;
            z-index: 1000;
            box-shadow: 0 8px 25px rgba(0, 0, 0, 0.5), inset 0 0 60px rgba(139, 69, 19, 0.3);
            backdrop-filter: blur(10px);
            -webkit-backdrop-filter: blur(10px);
            position: relative;
            max-height: 90vh;
            overflow-y: auto;
        }
        
        #tutorial::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            border-radius: 11px;
            box-shadow: inset 0 0 15px 3px rgba(139, 69, 19, 0.5);
            z-index: -1;
            pointer-events: none;
        }
        
        #tutorial::after {
            display: none; /* Emblem ausgeblendet */
        }
        
        /* Mobile-specific adjustments for tutorial window */
        @media (max-width: 768px) {
            #tutorial {
                top: 45%; /* Position even higher on mobile */
                max-height: 80vh; /* Smaller maximum height to ensure it fits better */
                padding-bottom: 50px; /* Extra padding to ensure button is visible */
                scrollbar-width: thin; /* Firefox */
                scrollbar-color: rgba(139, 69, 19, 0.5) rgba(58, 42, 29, 0.2); /* Firefox */
                margin-top: 20px; /* Zusätzlicher Abstand oben, damit das Emblem voll sichtbar ist */
            }
            
            /* Emblem ist jetzt ausgeblendet */
            
            /* Enhance the X close button for better mobile tapping */
            #tutorial #tutorial-x-close {
                width: 30px; /* Larger tap target */
                height: 30px;
                font-size: 22px; /* Larger X */
                top: 5px;
                right: 5px;
            }
            
            #tutorial-close {
                position: sticky; /* Make button sticky at bottom */
                bottom: 10px;
                margin-top: 15px; /* Add some space above the button */
                display: block;
                width: 90%; /* Make button wider on mobile */
                margin-left: auto;
                margin-right: auto;
                z-index: 20; /* Ensure button stays above content */
                background: linear-gradient(to bottom, #f0d363, #c9a22d); /* Brighter gold for mobile */
                box-shadow: 0 3px 12px rgba(0,0,0,0.4), 0 0 20px rgba(212, 175, 55, 0.5); /* Enhanced glow */
            }
        }
        
        /* Custom scrollbar for Chrome/Edge/Safari */
        #tutorial::-webkit-scrollbar {
            width: 8px;
        }
        
        #tutorial::-webkit-scrollbar-track {
            background: rgba(58, 42, 29, 0.2);
            border-radius: 8px;
        }
        
        #tutorial::-webkit-scrollbar-thumb {
            background: rgba(139, 69, 19, 0.5);
            border-radius: 8px;
            border: 2px solid rgba(58, 42, 29, 0.2);
        }
        
        #tutorial::-webkit-scrollbar-thumb:hover {
            background: rgba(139, 69, 19, 0.7);
        }

        /* Mittelalterlicher Ladebildschirm */
        #loading-screen {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            min-height: 100vh; /* Fallback für mobile Browser */
            background: url('../../../assets/backgrounds/panel-bg.png') center/cover no-repeat;
            display: none;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            z-index: 2000;
            backdrop-filter: blur(8px);
            -webkit-backdrop-filter: blur(8px);
            box-sizing: border-box;
            padding: 20px;
            position: relative;
            overflow: hidden;
        }
        
        /* Pergament-Hintergrund für Ladebildschirm */
        /* ENTFERNT: #loading-screen::before { ... } */
        /* ENTFERNT: #loading-screen::after { ... } */
        
        #loading-screen .loading-text {
            font-family: 'Cinzel', 'Times New Roman', serif;
            color: #ffe082;
            font-size: 2.1rem;
            font-weight: 700;
            text-shadow: 0 2px 8px #000, 0 0 18px #ffe082cc, 0 0 32px #fffbe6aa;
            background: rgba(40, 25, 10, 0.68);
            border-radius: 18px;
            padding: 18px 36px 14px 36px;
            margin-bottom: 2.5em;
            letter-spacing: 0.06em;
            box-shadow: 0 4px 18px rgba(0,0,0,0.25), 0 0 0 2px #ffe08233;
            position: relative;
            top: -30px;
            z-index: 2;
            border: 1.5px solid #ffe08255;
            text-align: center;
            overflow: hidden;
        }
        #loading-screen .loading-text::before,
        #loading-screen .loading-text::after {
            display: none;
        }
        #loading-screen .loading-text::after {
            content: '';
            position: absolute;
            left: 10%;
            top: 0;
            width: 80%;
            height: 40%;
            background: linear-gradient(120deg, rgba(255,255,255,0.18) 0%, rgba(255,255,255,0.05) 100%);
            border-radius: 50%;
            pointer-events: none;
            filter: blur(1.5px);
        }

        #loading-bar-container {
            width: min(340px, 70vw);
            height: 28px;
            background: rgba(139, 69, 19, 0.15);
            border: 2px solid rgba(139, 69, 19, 0.3);
            border-radius: 14px;
            overflow: hidden;
            box-shadow: 0 2px 8px rgba(0,0,0,0.2), inset 0 0 6px rgba(255,255,255,0.6);
            position: relative;
            margin: 0 auto 5vh auto;
            max-width: 100%;
            transform: translateY(-20px);
        }
        
        #loading-bar {
            height: 100%;
            width: 0%;
            background: linear-gradient(90deg, 
                #d4af37 0%, 
                #fffbe6 50%, 
                #d4af37 100%);
            background-size: 200% 100%;
            border-radius: 10px 0 0 10px;
            transition: width 0.3s ease-out;
            position: relative;
            animation: shimmer 2s infinite linear;
            box-shadow: 0 0 10px rgba(212, 175, 55, 0.5);
        }
        
        @keyframes shimmer {
            0% { background-position: 100% 0; }
            100% { background-position: -100% 0; }
        }
        
        #loading-bar-glow {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            height: 100%;
            width: 70px;
            background: linear-gradient(90deg, rgba(255,255,255,0.8) 0%, rgba(255,255,255,0.0) 100%);
            filter: blur(3px);
            opacity: 0.8;
            pointer-events: none;
            animation: loading-glow-move 1.5s ease-in-out infinite;
            box-shadow: 0 0 15px rgba(255, 255, 255, 0.8);
        }
        
        @keyframes loading-glow-move {
            0% { left: -10%; }
            100% { left: 110%; }
        }
        
        /* Dekorative Ornamente neben dem Ladebalken */
        #loading-bar-container::before,
        #loading-bar-container::after {
            content: '❧';
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            font-size: 1.4rem;
            color: rgba(139, 69, 19, 0.6);
        }
        
        #loading-bar-container::before {
            left: -2rem;
        }
        
        #loading-bar-container::after {
            right: -2rem;
        }
        
        /* Ladeanzeige zwischen den Wellen */
        #wave-transition-screen {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: 2000;
            background: url('../../../assets/backgrounds/menu-bg.png') center/cover no-repeat;
            display: none;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            animation: fadeIn 0.4s ease-out;
        }
        
        @keyframes fadeIn {
            from { opacity: 0; }
            to { opacity: 1; }
        }
        
        @keyframes fadeOut {
            from { opacity: 1; }
            to { opacity: 0; }
        }
        
        .wave-transition-content {
            background: rgba(20, 15, 10, 0.7);
            padding: 25px 40px;
            border-radius: 15px;
            box-shadow: 0 0 20px rgba(0, 0, 0, 0.5), inset 0 0 8px rgba(212, 175, 55, 0.4);
            display: flex;
            flex-direction: column;
            align-items: center;
            backdrop-filter: blur(5px);
            border: 1px solid rgba(212, 175, 55, 0.3);
            max-width: 90%;
        }
        
        .wave-transition-text {
            font-family: 'Cinzel', 'Times New Roman', serif;
            color: #ffe082;
            font-size: 1.8rem;
            text-shadow: 0 2px 4px #000;
            margin-bottom: 20px;
            text-align: center;
        }
        
        .wave-transition-loader {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 15px;
            width: 100%;
        }
        
        .loader-symbol {
            font-size: 2.5rem;
            color: #d4af37;
            animation: pulse 1.5s infinite;
        }
        
        @keyframes pulse {
            0% { transform: scale(1); }
            50% { transform: scale(1.2); }
            100% { transform: scale(1); }
        }
        
        .loader-bar {
            width: 280px;
            height: 15px;
            background: rgba(80, 60, 30, 0.6);
            border-radius: 8px;
            overflow: hidden;
            position: relative;
            border: 1px solid rgba(212, 175, 55, 0.5);
            box-shadow: inset 0 0 8px rgba(0, 0, 0, 0.5);
            max-width: 100%;
        }
        
        .loader-progress {
            height: 100%;
            width: 0%;
            background: linear-gradient(90deg, 
                #a97c50 0%, 
                #d4af37 50%, 
                #a97c50 100%);
            background-size: 200% 100%;
            animation: progressAnimation 4s linear forwards, shimmer 1.5s infinite linear;
            box-shadow: 0 0 10px rgba(212, 175, 55, 0.3);
        }
        
        @keyframes progressAnimation {
            from { width: 0%; }
            to { width: 100%; }
        }

        /* Spielername Pop-up */
        #playername-modal {
            position: fixed;
            top: 0;
            left: 0;
            width: 100vw;
            height: 100vh;
            background: url('../../../assets/backgrounds/panel-bg.png') center/cover no-repeat;
            display: none;
            align-items: center;
            justify-content: center;
            z-index: 2100;
        }
        #playername-modal .modal-content {
            background: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiPjxkZWZzPjxwYXR0ZXJuIGlkPSJwYXR0ZXJuIiBwYXR0ZXJuVW5pdHM9InVzZXJTcGFjZU9uVXNlIiB3aWR0aD0iMTAwIiBoZWlnaHQ9IjEwMCI+PHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEwMCIgaGVpZ2h0PSIxMDAiIGZpbGw9InJnYmEoMjQ1LCAyMzAsIDIwMCwgMC45NSkiLz48cGF0aCBkPSJNLTI1IDUwIGw1MCAtMjUgbDUwIDI1IGw1MCAtMjUgbDUwIDI1IiBzdHJva2U9InJnYmEoMTgwLCAxNTAsIDEwMCwgMC4yKSIgc3Ryb2tlLXdpZHRoPSIwLjUiIGZpbGw9Im5vbmUiLz48L3BhdHRlcm4+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjcGF0dGVybikiLz48L3N2Zz4=');
            border-radius: 16px;
            padding: 42px 32px 36px 32px;
            box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5), inset 0 0 60px rgba(139, 69, 19, 0.3);
            text-align: center;
            min-width: 300px;
            max-width: 90vw;
            position: relative;
            border: 5px solid #8B4513;
        }
        #playername-modal .modal-content::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            border-radius: 11px;
            box-shadow: inset 0 0 15px 3px rgba(139, 69, 19, 0.5);
            z-index: -1;
            pointer-events: none;
        }
        #playername-modal .modal-content::after {
            content: '♔';
            position: absolute;
            top: -25px;
            left: 50%;
            transform: translateX(-50%);
            background: radial-gradient(circle, #d4af37 0%, #AA8C2C 100%);
            color: #5D3A1A;
            font-size: 2rem;
            width: 50px;
            height: 50px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.4);
            border: 2px solid #f5e6c5;
            text-shadow: 0px 1px 0px rgba(255, 255, 255, 0.3);
        }
        #playername-modal label {
            font-family: 'Cinzel', 'Times New Roman', serif;
            color: #8B4513;
            font-size: 1.4rem;
            font-weight: bold;
            margin-bottom: 22px;
            display: block;
            text-shadow: 0px 1px 0px rgba(255, 255, 255, 0.5);
            letter-spacing: 0.03em;
        }
        #playername-modal input[type="text"] {
            padding: 12px 16px;
            border-radius: 8px;
            background-color: rgba(255, 255, 255, 0.9);
            border: 2px solid #8B4513;
            font-size: 1.1rem;
            margin-bottom: 24px;
            width: 80%;
            max-width: 260px;
            box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);
            font-family: 'Cormorant Garamond', 'Georgia', serif;
            color: #5D4037;
        }
        #playername-modal button {
            background: linear-gradient(to bottom, var(--gold-primary), var(--gold-secondary));
            color: var(--dark-brown);
            border: none;
            padding: 12px 28px;
            border-radius: 8px;
            cursor: pointer;
            font-weight: bold;
            font-size: 1.1em;
            margin-top: 5px;
            box-shadow: 0 3px 8px rgba(0,0,0,0.3);
            transition: transform 0.2s, background 0.2s;
            font-family: 'Cinzel', 'Times New Roman', serif;
            position: relative;
            overflow: hidden;
        }
        #playername-modal button::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 70%;
            height: 100%;
            background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,0.3) 50%, rgba(255,255,255,0) 100%);
            transform: skewX(-25deg);
            transition: left 0.8s ease;
        }
        #playername-modal button:hover {
            transform: translateY(-2px) scale(1.04);
            box-shadow: 0 5px 12px rgba(0,0,0,0.4);
            background: linear-gradient(to bottom, #ffe082, var(--gold-primary));
        }
        #playername-modal button:hover::before {
            left: 130%;
            transition: left 0.8s ease;
        }
        
        /* Additional styling for the player name modal */
        #playername-modal .royal-insignia {
            position: absolute;
            top: -17px;
            left: 50%;
            transform: translateX(-50%);
            width: 35px;
            height: 35px;
            z-index: 10;
        }
        
        #playername-modal .royal-scroll-decoration {
            text-align: center;
            margin: 15px 0;
        }
        
        /* CSS für die Nationsauswahl */
        .faction-selection-title {
            font-family: 'Cinzel', 'Times New Roman', serif;
            margin-top: 20px;
            text-align: center;
            font-size: 1.1em;
            color: #8B4513;
            font-weight: bold;
            letter-spacing: 0.03em;
            text-shadow: 0px 1px 0px rgba(255, 255, 255, 0.5);
        }
        
        .faction-selection {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            gap: 10px;
            margin: 10px 0;
            max-width: 100%;
        }
        
        .faction-button {
            display: flex;
            flex-direction: column;
            align-items: center;
            padding: 8px 10px;
            border: 2px solid #8c734b;
            border-radius: 8px;
            background: linear-gradient(to bottom, #d9c9a3, #c9b99c); /* Darker, more consistent background for all nations */
            cursor: pointer;
            transition: all 0.2s ease;
            min-width: 100px;
            max-width: 120px;
        }
        
        .faction-button:hover {
            background: linear-gradient(to bottom, #e0d0a9, #d0c0a0);
            transform: translateY(-2px);
            box-shadow: 0 3px 6px rgba(0,0,0,0.15);
        }
        
        .faction-button.active {
            border-color: #d4af37;
            transform: translateY(-2px);
            position: relative;
            /* Verbesserte Hervorhebung der ausgewählten Nation */
            outline: 2px solid #d4af37;
            outline-offset: 1px;
            animation: faction-selected-pulse 2s infinite;
        }
        
        /* Animation für die ausgewählte Nation */
        @keyframes faction-selected-pulse {
            0% { box-shadow: 0 0 8px #d4af37, inset 0 0 10px rgba(212, 175, 55, 0.3); }
            50% { box-shadow: 0 0 15px #d4af37, inset 0 0 15px rgba(212, 175, 55, 0.5); }
            100% { box-shadow: 0 0 8px #d4af37, inset 0 0 10px rgba(212, 175, 55, 0.3); }
        }
        
        .faction-icon {
            font-size: 22px;
            margin-bottom: 5px;
        }
        
        .faction-name {
            font-size: 0.85em;
            text-align: center;
            line-height: 1.2;
        }
        
        @media (max-width: 500px) {
            .faction-selection {
                gap: 6px;
            }
            
            .faction-button {
                padding: 6px 8px;
                min-width: 85px;
            }
            
            .faction-icon {
                font-size: 18px;
            }
            
            .faction-name {
                font-size: 0.75em;
            }
        }
        
        #playername-modal .btn-text {
            position: relative;
            z-index: 10;
        }
        
        #playername-modal button.submitting {
            transform: scale(0.95);
            opacity: 0.8;
            box-shadow: 0 2px 4px rgba(0,0,0,0.3);
            background: linear-gradient(to bottom, #ffe082, #d4af37);
        }
        
        #playername-modal button.nation-selected {
            border-color: #d4af37;
            background: linear-gradient(to bottom, #f5eeda, #e6d294);
            box-shadow: 0 0 10px #d4af37, inset 0 0 12px rgba(212, 175, 55, 0.4);
            animation: confirm-button-pulse 2s infinite;
        }
        
        @keyframes confirm-button-pulse {
            0% { box-shadow: 0 0 10px #d4af37, inset 0 0 12px rgba(212, 175, 55, 0.4); }
            50% { box-shadow: 0 0 16px #d4af37, inset 0 0 18px rgba(212, 175, 55, 0.6); }
            100% { box-shadow: 0 0 10px #d4af37, inset 0 0 12px rgba(212, 175, 55, 0.4); }
        }
        

        /* Accordion Credits Styles */
        .accordion-credits {
            margin-bottom: 18px;
        }
        .accordion-item {
            margin-bottom: 8px;
            border-radius: 8px;
            overflow: hidden;
            background: rgba(0,0,0,0.13);
            box-shadow: 0 1px 4px rgba(0,0,0,0.07);
        }
        .accordion-title {
            width: 100%;
            text-align: left;
            background: linear-gradient(to right, #d4af37 0%, #aa8c2c 100%);
            color: #3a2a1d;
            font-weight: bold;
            font-size: 1.08em;
            border: none;
            outline: none;
            padding: 10px 18px;
            cursor: pointer;
            transition: background 0.2s;
            border-bottom: 1px solid #c7a13a;
        }
        .accordion-title:hover {
            background: linear-gradient(to right, #ffe082 0%, #d4af37 100%);
        }
        .accordion-panel {
            background: rgba(58,42,29,0.93);
            color: #fff;
            padding: 10px 18px 12px 18px;
            font-size: 0.98em;
            border-radius: 0 0 8px 8px;
            border-top: 1px solid #c7a13a;
        }

        /* Spezielles Styling für den Verstanden-Button im Tutorial */
        #tutorial h3.medieval-title {
            font-family: 'Cinzel', 'Times New Roman', serif;
            color: var(--gold-primary);
            margin-bottom: 18px;
            font-size: 1.5em;
            text-align: center;
            text-shadow: 0 2px 4px rgba(0,0,0,0.4);
            letter-spacing: 0.05em;
            position: relative;
        }
        
        #tutorial p {
            font-family: 'Cormorant Garamond', 'Georgia', serif;
            font-size: 1.1em;
            line-height: 1.5;
            margin-bottom: 15px;
            text-shadow: 0 1px 2px rgba(0,0,0,0.2);
        }
        
        #tutorial ul.medieval-list {
            margin-bottom: 20px;
            padding-left: 20px;
            font-family: 'Cormorant Garamond', 'Georgia', serif;
            font-size: 1.05em;
        }
        
        #tutorial ul.medieval-list li {
            margin-bottom: 8px;
            line-height: 1.4;
            position: relative;
        }
        
        #tutorial ul.medieval-list li::before {
            content: '•';
            color: var(--gold-primary);
            position: absolute;
            left: -15px;
            top: 0;
        }
        
        /* Stil für die Tutorial-Abschnittstitel */
        .tutorial-section-title {
            font-family: 'Cinzel', 'Times New Roman', serif;
            color: #d4af37;
            margin-top: 18px;
            margin-bottom: 8px;
            font-size: 1.2em;
            letter-spacing: 0.05em;
            text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
            position: relative;
            padding-left: 22px;
        }
        
        /* Dekoratives Element vor den Abschnittsüberschriften */
        .tutorial-section-title::before {
            content: '◆';
            position: absolute;
            left: 0;
            font-size: 0.8em;
            color: #d4af37;
            top: 50%;
            transform: translateY(-50%);
        }
        
        #tutorial #tutorial-close {
            background: linear-gradient(to bottom, var(--gold-primary), var(--gold-secondary));
            color: var(--dark-brown);
            border: 1px solid rgba(139, 69, 19, 0.5);
            padding: 12px 32px;
            border-radius: 8px;
            cursor: pointer;
            font-weight: bold;
            font-size: 1.1em;
            display: block;
            margin: 25px auto 0;
            box-shadow: 0 3px 8px rgba(0,0,0,0.3), 0 0 15px rgba(212, 175, 55, 0.3);
            transition: all 0.25s ease;
            font-family: 'Cinzel', 'Times New Roman', serif;
            position: relative;
            overflow: hidden;
            letter-spacing: 0.03em;
            z-index: 10; /* Ensure button is above content when scrolling */
        }
        
        #tutorial #tutorial-close::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 70%;
            height: 100%;
            background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,0.3) 50%, rgba(255,255,255,0) 100%);
            transform: skewX(-25deg);
            transition: left 0.75s ease;
        }
        
        #tutorial #tutorial-close:hover {
            transform: translateY(-3px);
            box-shadow: 0 6px 12px rgba(0,0,0,0.45);
            background: linear-gradient(to bottom, #ffe082, var(--gold-primary));
        }
        
        #tutorial #tutorial-close:hover::before {
            left: 130%;
        }

        /* Hilfe-Button in der Top-Bar */
        #wave-display {
            font-family: 'Cinzel', 'Times New Roman', serif;
            font-weight: bold;
            font-size: 1.15em;
            color: #f5e6c5;
            text-shadow: 0 1px 3px rgba(0,0,0,0.5);
            letter-spacing: 0.05em;
            background: rgba(0, 0, 0, 0.2);
            padding: 5px 12px;
            border-radius: 20px;
            border: 1px solid rgba(212, 175, 55, 0.3);
            box-shadow: inset 0 0 8px rgba(0, 0, 0, 0.2);
            display: flex;
            align-items: center;
            justify-content: center;
        }
        
        #wave-display::before {
            content: "〰️"; /* Wellensymbol */
            margin-right: 6px;
            font-size: 0.9em;
        }
        
        
        
        #top-bar #help-btn, #top-bar #music-btn {
            margin-left: 16px;
            background: radial-gradient(circle, rgba(58, 42, 29, 0.8) 0%, rgba(40, 30, 20, 0.85) 100%);
            color: #f5e6c5;
            border: 1px solid rgba(212, 175, 55, 0.3);
            border-radius: 50%;
            width: 30px;
            height: 30px;
            font-size: 1.1em;
            font-weight: bold;
            box-shadow: 0 2px 5px rgba(0,0,0,0.2), inset 0 0 4px rgba(0, 0, 0, 0.2);
            cursor: pointer;
            transition: all 0.2s ease;
            display: flex;
            align-items: center;
            justify-content: center;
            outline: none;
            position: relative;
            z-index: 1001;
            pointer-events: auto;
        }
        
        #top-bar #music-btn {
            margin-left: 12px; /* Etwas weniger Abstand zwischen den Buttons */
        }
        
        #top-bar #help-btn:hover, #top-bar #music-btn:hover {
            background: radial-gradient(circle, rgba(65, 50, 30, 0.85) 0%, rgba(50, 35, 20, 0.9) 100%);
            color: var(--gold-primary);
            transform: scale(1.1);
            box-shadow: 0 3px 8px rgba(0,0,0,0.3), inset 0 0 6px rgba(0, 0, 0, 0.3);
        }
        
        #start-music-btn {
            position: absolute;
            top: 15px;
            right: 15px;
            background: radial-gradient(circle, rgba(58, 42, 29, 0.8) 0%, rgba(40, 30, 20, 0.85) 100%);
            color: #f5e6c5;
            border: 1px solid rgba(212, 175, 55, 0.3);
            border-radius: 50%;
            width: 36px;
            height: 36px;
            font-size: 1.2em;
            box-shadow: 0 2px 5px rgba(0,0,0,0.3), inset 0 0 4px rgba(0, 0, 0, 0.2);
            cursor: pointer;
            transition: all 0.2s ease;
            display: flex;
            align-items: center;
            justify-content: center;
            z-index: 101;
        }
        
        #start-music-btn:hover {
            background: radial-gradient(circle, rgba(65, 50, 30, 0.85) 0%, rgba(50, 35, 20, 0.9) 100%);
            color: var(--gold-primary);
            transform: scale(1.1);
        }

        /* Game Notification */
        .game-notification {
            position: fixed;
            top: 20%;
            left: 50%;
            transform: translateX(-50%);
            background: rgba(58, 42, 29, 0.95);
            color: var(--gold-primary);
            padding: 15px 25px;
            border-radius: 8px;
            border: 2px solid var(--gold-primary);
            font-size: 1.1em;
            font-weight: bold;
            z-index: 2000; /* Höher als Tutorial und andere UI-Elemente */
            pointer-events: none;
            animation: fadeIn 0.3s ease-out;
        }

        @keyframes fadeIn {
            from { opacity: 0; transform: translate(-50%, -20px); }
            to { opacity: 1; transform: translate(-50%, 0); }
        }

        .game-notification.fade-out {
            animation: fadeOut 0.5s ease-in forwards;
        }

        @keyframes fadeOut {
            from { opacity: 1; transform: translate(-50%, 0); }
            to { opacity: 0; transform: translate(-50%, -20px); }
        }
        
        
        /* Kompakte Schnellangriff-Anzeige */
        .quick-attack-indicator {
            position: absolute;
            transform: translate(-50%, -50%);
            background-color: rgba(0, 0, 0, 0.65);
            color: white;
            padding: 3px 8px;
            border-radius: 12px;
            font-size: 0.9em;
            font-weight: bold;
            display: flex;
            align-items: center;
            justify-content: center;
            pointer-events: none;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
            white-space: nowrap;
            border: 1px solid rgba(255, 255, 255, 0.2);
            z-index: 1000;
            animation: fadeInUp 0.2s ease-out forwards;
        }
        
        .quick-attack-indicator .attack-arrow {
            margin-right: 3px;
            font-size: 0.9em;
        }
        
        .quick-attack-indicator.fade-out {
            animation: fadeOutUp 0.3s ease-in forwards;
        }
        
        @keyframes fadeInUp {
            from { opacity: 0; transform: translate(-50%, 0%); }
            to { opacity: 1; transform: translate(-50%, -50%); }
        }
        
        @keyframes fadeOutUp {
            from { opacity: 1; transform: translate(-50%, -50%); }
            to { opacity: 0; transform: translate(-50%, -100%); }
        }
        
        /* Mittelalterliche Willkommensnachricht Styling */
        .royal-welcome {
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%) scale(0.9);
            background: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiPjxkZWZzPjxwYXR0ZXJuIGlkPSJwYXR0ZXJuIiBwYXR0ZXJuVW5pdHM9InVzZXJTcGFjZU9uVXNlIiB3aWR0aD0iMTAwIiBoZWlnaHQ9IjEwMCI+PHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEwMCIgaGVpZ2h0PSIxMDAiIGZpbGw9InJnYmEoMjQ1LCAyMzAsIDIwMCwgMC45NSkiLz48cGF0aCBkPSJNLTI1IDUwIGw1MCAtMjUgbDUwIDI1IGw1MCAtMjUgbDUwIDI1IiBzdHJva2U9InJnYmEoMTgwLCAxNTAsIDEwMCwgMC4yKSIgc3Ryb2tlLXdpZHRoPSIwLjUiIGZpbGw9Im5vbmUiLz48L3BhdHRlcm4+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjcGF0dGVybikiLz48L3N2Zz4=');
            background-color: #f5e6c5;
            border: 5px solid #8B4513;
            border-radius: 16px;
            box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5), inset 0 0 60px rgba(139, 69, 19, 0.3);
            width: 90%;
            max-width: 500px;
            min-width: 280px;
            padding: 30px 20px;
            text-align: center;
            z-index: 9999;
            pointer-events: none;
                opacity: 0;
            animation: welcomeAppear 1s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards, 
                       welcomeDisappear 1s ease-in 5s forwards;
        }
        
        .royal-welcome::before, .royal-welcome::after {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            border-radius: 11px;
            pointer-events: none;
        }
        
        .royal-welcome::before {
            box-shadow: inset 0 0 15px 3px rgba(139, 69, 19, 0.5);
            z-index: -1;
        }
        
        .royal-welcome::after {
            border: 1px solid rgba(139, 69, 19, 0.3);
            z-index: 1;
        }
        
        .royal-welcome-title {
            font-family: 'Cinzel', 'Times New Roman', serif;
            color: #8B4513;
            font-size: 1.5rem;
            margin-bottom: 1.2rem;
            text-shadow: 0px 1px 0px rgba(255, 255, 255, 0.5);
            font-weight: bold;
            letter-spacing: 0.05em;
        }
        
        .royal-welcome-message {
            font-family: 'Cormorant Garamond', 'Georgia', serif;
            color: #5D4037;
            font-size: 1.2rem;
            line-height: 1.5;
            margin-bottom: 0.8rem;
            text-shadow: 0px 1px 0px rgba(255, 255, 255, 0.5);
        }
        
        .royal-welcome-signature {
            font-family: 'Tangerine', 'Brush Script MT', cursive;
            color: #8B4513;
            font-size: 1.8rem;
            margin-top: 1.5rem;
            font-weight: bold;
            text-shadow: 0px 1px 0px rgba(255, 255, 255, 0.5);
        }
        
        .royal-seal {
            width: 60px;
            height: 60px;
            border-radius: 50%;
            background: radial-gradient(circle, #d4af37 0%, #AA8C2C 100%);
            display: inline-flex;
            align-items: center;
            justify-content: center;
            margin-top: 0.8rem;
            box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
            transform: rotate(10deg);
        }
        
        .royal-seal::before {
            content: '⚔';
            color: #8B4513;
            font-size: 2rem;
            line-height: 1;
            text-shadow: 0px 1px 0px rgba(255, 255, 255, 0.3);
        }
        
        @keyframes welcomeAppear {
            0% { opacity: 0; transform: translate(-50%, -50%) scale(0.8); }
            100% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
        }
        
        @keyframes welcomeDisappear {
            0% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
            100% { opacity: 0; transform: translate(-50%, -50%) scale(0.9); }
        }
        
        @media (max-width: 600px) {
            .royal-welcome {
                padding: 20px 15px;
                max-width: 90%;
            }
            .royal-welcome-title {
                font-size: 1.3rem;
            }
            .royal-welcome-message {
                font-size: 1.1rem;
            }
            .royal-welcome-signature {
                font-size: 1.6rem;
            }
        }

        #pause-btn {
            margin-left: 12px;
            background: radial-gradient(circle, rgba(58, 42, 29, 0.8) 0%, rgba(40, 30, 20, 0.85) 100%);
            color: #f5e6c5;
            border-radius: 50%; /* Runde Form für Symbol-Button */
            width: 30px; /* Gleiche Größe wie andere Buttons */
            height: 30px; /* Gleiche Größe wie andere Buttons */
            font-size: 1em;
            font-weight: bold;
            box-shadow: 0 2px 5px rgba(0,0,0,0.2), inset 0 0 4px rgba(0, 0, 0, 0.2);
            cursor: pointer;
            transition: all 0.2s ease;
            display: flex;
            align-items: center;
            justify-content: center;
            outline: none;
            position: relative;
            z-index: 1001;
            pointer-events: auto;
            padding: 0; /* Kein Padding mehr nötig */
            border: 1px solid rgba(212, 175, 55, 0.3);
            overflow: hidden;
        }
        
        #pause-btn::before {
            content: '';
            position: absolute;
            top: 0;
            left: -150%;
            width: 100%;
            height: 100%;
            background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,0.15) 50%, rgba(255,255,255,0) 100%);
            transform: skewX(-25deg);
            transition: all 0.75s ease;
        }
        
        #pause-btn .pause-icon {
            display: inline-block;
            position: relative;
            width: 10px;
            height: 10px;
        }
        
        #pause-btn .pause-icon::before,
        #pause-btn .pause-icon::after {
            content: '';
            position: absolute;
            top: 0;
            width: 3px;
            height: 10px;
            background-color: var(--gold-primary);
            border-radius: 1px;
            box-shadow: 0 1px 2px rgba(0,0,0,0.3);
        }
        
        #pause-btn .pause-icon::before {
            left: 0;
        }
        
        #pause-btn .pause-icon::after {
            right: 0;
        }
        
        #pause-btn:hover {
            background: radial-gradient(circle, rgba(65, 50, 30, 0.85) 0%, rgba(50, 35, 20, 0.9) 100%);
            color: var(--gold-primary);
            transform: translateY(-2px) scale(1.03);
            box-shadow: 0 3px 8px rgba(0,0,0,0.3), inset 0 0 6px rgba(0, 0, 0, 0.3);
            border-color: rgba(212, 175, 55, 0.5);
        }
        
        #pause-btn:hover::before {
            left: 150%;
        }
        
        @media (max-width: 600px) {
            #pause-btn {
                font-size: 0.95em;
                padding: 8px 12px;
            }
        }
        #pause-overlay {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100vw;
            height: 100vh;
            background: rgba(30, 20, 10, 0.65);
            z-index: 3000;
            align-items: center;
            justify-content: center;
        }
        #pause-overlay.active {
            display: flex;
        }
        .pause-content {
            background: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiPjxkZWZzPjxwYXR0ZXJuIGlkPSJwYXR0ZXJuIiBwYXR0ZXJuVW5pdHM9InVzZXJTcGFjZU9uVXNlIiB3aWR0aD0iMTAwIiBoZWlnaHQ9IjEwMCI+PHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEwMCIgaGVpZ2h0PSIxMDAiIGZpbGw9InJnYmEoNTgsIDQyLCAyOSwgMC45NSkiLz48cGF0aCBkPSJNLTI1IDUwIGw1MCAtMjUgbDUwIDI1IGw1MCAtMjUgbDUwIDI1IiBzdHJva2U9InJnYmEoMjEyLCAxNzUsIDU1LCAwLjE1KSIgc3Ryb2tlLXdpZHRoPSIwLjUiIGZpbGw9Im5vbmUiLz48L3BhdHRlcm4+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjcGF0dGVybikiLz48L3N2Zz4=');
            border-radius: 16px;
            padding: 42px 36px 36px 36px;
            box-shadow: 0 8px 25px rgba(0, 0, 0, 0.5), inset 0 0 60px rgba(139, 69, 19, 0.3);
            border: 5px solid #8B4513;
            text-align: center;
            min-width: 300px;
            max-width: 90vw;
            position: relative;
        }
        
        .pause-content::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            border-radius: 11px;
            box-shadow: inset 0 0 15px 3px rgba(139, 69, 19, 0.5);
            z-index: -1;
            pointer-events: none;
        }
        
        .pause-content::after {
            content: '⚔';
            position: absolute;
            top: -25px;
            left: 50%;
            transform: translateX(-50%);
            background: radial-gradient(circle, #d4af37 0%, #AA8C2C 100%);
            color: #5D3A1A;
            font-size: 1.5rem;
            width: 50px;
            height: 50px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.4);
            border: 2px solid #f5e6c5;
            text-shadow: 0px 1px 0px rgba(255, 255, 255, 0.3);
        }
        
        .pause-content h2 {
            font-family: 'Cinzel', 'Times New Roman', serif;
            color: var(--gold-primary);
            font-size: 2em;
            margin-bottom: 24px;
            text-shadow: 0px 2px 2px rgba(0, 0, 0, 0.5);
            letter-spacing: 0.04em;
        }
        #resume-btn, #main-menu-btn {
            background: linear-gradient(to bottom, var(--gold-primary), var(--gold-secondary));
            color: var(--dark-brown);
            border: 1px solid rgba(139, 69, 19, 0.5);
            padding: 12px 28px;
            border-radius: 8px;
            cursor: pointer;
            font-weight: bold;
            font-size: 1.1em;
            margin: 15px 5px 5px;
            box-shadow: 0 3px 8px rgba(0,0,0,0.3);
            transition: all 0.25s ease;
            font-family: 'Cinzel', 'Times New Roman', serif;
            position: relative;
            overflow: hidden;
            letter-spacing: 0.02em;
        }
        
        #resume-btn::before, #main-menu-btn::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 70%;
            height: 100%;
            background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,0.3) 50%, rgba(255,255,255,0) 100%);
            transform: skewX(-25deg);
            transition: left 0.75s ease;
        }
        
        #main-menu-btn {
            background: linear-gradient(to bottom, #8B4513, #5D3A1A);
            color: #f5e6c5;
            border-color: rgba(212, 175, 55, 0.4);
        }
        
        #resume-btn:hover, #main-menu-btn:hover {
            transform: translateY(-3px);
            box-shadow: 0 6px 12px rgba(0,0,0,0.45);
        }
        
        #resume-btn:hover {
            background: linear-gradient(to bottom, #ffe082, var(--gold-primary));
        }
        
        #main-menu-btn:hover {
            background: linear-gradient(to bottom, #A0522D, #8B4513);
        }
        
        #resume-btn:hover::before, #main-menu-btn:hover::before {
            left: 130%;
        }
        
        .medieval-divider {
            margin: 0 auto 20px;
            text-align: center;
        }
        
        .btn-icon {
            font-size: 0.85em;
            margin-right: 8px;
            opacity: 0.9;
        }
        #options-modal {
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%) scale(0.96);
            background: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiPjxkZWZzPjxwYXR0ZXJuIGlkPSJwYXR0ZXJuIiBwYXR0ZXJuVW5pdHM9InVzZXJTcGFjZU9uVXNlIiB3aWR0aD0iMTAwIiBoZWlnaHQ9IjEwMCI+PHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEwMCIgaGVpZ2h0PSIxMDAiIGZpbGw9InJnYmEoNTgsIDQyLCAyOSwgMC45NSkiLz48cGF0aCBkPSJNLTI1IDUwIGw1MCAtMjUgbDUwIDI1IGw1MCAtMjUgbDUwIDI1IiBzdHJva2U9InJnYmEoMjEyLCAxNzUsIDU1LCAwLjE1KSIgc3Ryb2tlLXdpZHRoPSIwLjUiIGZpbGw9Im5vbmUiLz48L3BhdHRlcm4+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjcGF0dGVybikiLz48L3N2Zz4=');
            color: white;
            padding: 42px 36px 36px 36px;
            border-radius: 16px;
            border: 5px solid #8B4513;
            max-width: 90vw;
            min-width: 280px;
            z-index: 1200;
            box-shadow: 0 8px 25px rgba(0, 0, 0, 0.5), inset 0 0 60px rgba(139, 69, 19, 0.3);
            backdrop-filter: blur(10px);
            -webkit-backdrop-filter: blur(10px);
            opacity: 0;
            pointer-events: none;
            transition: opacity 0.3s cubic-bezier(.4,0,.2,1), transform 0.3s cubic-bezier(.4,0,.2,1);
            position: relative;
        }
        
        #options-modal::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            border-radius: 11px;
            box-shadow: inset 0 0 15px 3px rgba(139, 69, 19, 0.5);
            z-index: -1;
            pointer-events: none;
        }
        
        #options-modal::after {
            content: '⚙️';
            position: absolute;
            top: -25px;
            left: 50%;
            transform: translateX(-50%);
            background: radial-gradient(circle, #d4af37 0%, #AA8C2C 100%);
            color: #5D3A1A;
            font-size: 1.5rem;
            width: 50px;
            height: 50px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.4);
            border: 2px solid #f5e6c5;
            text-shadow: 0px 1px 0px rgba(255, 255, 255, 0.3);
        }
        
        #options-modal.active {
                opacity: 1;
            pointer-events: all;
            transform: translate(-50%, -50%) scale(1);
        }
        
        #options-modal h2 {
            font-family: 'Cinzel', 'Times New Roman', serif;
            color: var(--gold-primary);
            margin-bottom: 22px;
            font-size: 1.5em;
            text-align: center;
            text-shadow: 0 2px 4px rgba(0,0,0,0.4);
            letter-spacing: 0.05em;
            position: relative;
        }
        
        #options-modal h2::after {
            content: '';
            position: absolute;
            bottom: -10px;
            left: 50%;
            transform: translateX(-50%);
            width: 80%;
            height: 1px;
            background: linear-gradient(90deg, 
                transparent 0%, 
                rgba(212, 175, 55, 0.3) 20%, 
                rgba(212, 175, 55, 0.7) 50%, 
                rgba(212, 175, 55, 0.3) 80%, 
                transparent 100%);
        }
        
        .option-row {
            margin-bottom: 22px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            position: relative;
        }
        
        .option-row::after {
            content: '';
            position: absolute;
            bottom: -11px;
            left: 5%;
            width: 90%;
            height: 1px;
            background: linear-gradient(90deg, 
                transparent 0%, 
                rgba(212, 175, 55, 0.1) 20%, 
                rgba(212, 175, 55, 0.2) 50%, 
                rgba(212, 175, 55, 0.1) 80%, 
                transparent 100%);
        }
        
        .option-row:last-of-type::after {
            display: none;
        }
        
        .option-label {
            font-family: 'Cormorant Garamond', 'Georgia', serif;
            font-weight: bold;
            font-size: 1.15em;
            color: #f5e6c5;
            text-shadow: 0 1px 2px rgba(0,0,0,0.3);
        }
        
        .option-select, .option-btn {
            font-family: 'Cinzel', 'Times New Roman', serif;
            font-size: 1em;
            padding: 7px 16px;
            border-radius: 7px;
            border: 2px solid var(--gold-secondary);
            background: #38220f;
            color: var(--gold-primary);
            font-weight: bold;
            cursor: pointer;
            margin-left: 12px;
            box-shadow: 0 3px 5px rgba(0,0,0,0.2);
            transition: all 0.2s ease;
        }
        
        .option-select:hover, .option-btn:hover {
            box-shadow: 0 4px 8px rgba(0,0,0,0.3);
            transform: translateY(-2px);
        }
        
        .option-select {
            -webkit-appearance: none;
            -moz-appearance: none;
            appearance: none;
            background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="12" height="6"><path d="M0,0 L12,0 L6,6 Z" fill="%23d4af37"/></svg>');
            background-repeat: no-repeat;
            background-position: right 10px center;
            padding-right: 30px;
        }
        
        .option-btn.danger {
            background: #38150f;
            color: #e74c3c;
            border: 2px solid #c0392b;
        }
        
        .option-btn.danger:hover {
            background: #4a1c14;
            color: #ff6b5e;
        }
        
        .option-checkbox {
            width: 22px;
            height: 22px;
            accent-color: var(--gold-primary);
            cursor: pointer;
            margin-left: 12px;
            box-shadow: 0 2px 3px rgba(0,0,0,0.3);
        }
        
        #options-modal .close-button {
            background: linear-gradient(to bottom, var(--gold-primary), var(--gold-secondary));
            color: var(--dark-brown);
            border: 1px solid rgba(139, 69, 19, 0.5);
            padding: 12px 28px;
            border-radius: 8px;
            cursor: pointer;
            font-weight: bold;
            font-size: 1.1em;
            display: block;
            margin: 25px auto 0;
            box-shadow: 0 3px 8px rgba(0,0,0,0.3);
            transition: all 0.25s ease;
            font-family: 'Cinzel', 'Times New Roman', serif;
            position: relative;
            overflow: hidden;
            letter-spacing: 0.03em;
        }
        
        #options-modal .close-button::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 70%;
            height: 100%;
            background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,0.3) 50%, rgba(255,255,255,0) 100%);
            transform: skewX(-25deg);
            transition: left 0.75s ease;
        }
        
        #options-modal .close-button:hover {
            transform: translateY(-3px);
            box-shadow: 0 6px 12px rgba(0,0,0,0.45);
            background: linear-gradient(to bottom, #ffe082, var(--gold-primary));
        }
        
        #options-modal .close-button:hover::before {
            left: 130%;
        }
        
        /* Highscore Modal Styles */
        #highscore-modal {
            position: fixed !important;
            top: 0 !important; /* Ganz oben am Bildschirmrand mit !important */
            left: 0 !important; /* Komplette Breite von links */
            right: 0 !important; /* Komplette Breite bis rechts */
            width: 100% !important; /* Volle Breite */
            max-width: 100% !important; /* Volle Breite ohne Einschränkung */
            transform: none !important; /* Keine Transformation, um volle Breite zu ermöglichen */
            margin: 0 !important; /* Kein Abstand in alle Richtungen */
            background: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiPjxkZWZzPjxwYXR0ZXJuIGlkPSJwYXR0ZXJuIiBwYXR0ZXJuVW5pdHM9InVzZXJTcGFjZU9uVXNlIiB3aWR0aD0iMTAwIiBoZWlnaHQ9IjEwMCI+PHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEwMCIgaGVpZ2h0PSIxMDAiIGZpbGw9InJnYmEoNTgsIDQyLCAyOSwgMC45NSkiLz48cGF0aCBkPSJNLTI1IDUwIGw1MCAtMjUgbDUwIDI1IGw1MCAtMjUgbDUwIDI1IiBzdHJva2U9InJnYmEoMjEyLCAxNzUsIDU1LCAwLjE1KSIgc3Ryb2tlLXdpZHRoPSIwLjUiIGZpbGw9Im5vbmUiLz48L3BhdHRlcm4+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjcGF0dGVybikiLz48L3N2Zz4=');
            color: white;
            padding: 10px 28px 20px 28px !important; /* Noch weiter reduziertes Padding */
            border-radius: 0 !important; /* Keine Rundung mehr */
            border: none !important; /* Kein Rand */
            height: 100vh !important; /* Volle Bildschirmhöhe */
            max-height: 100vh !important; /* Maximale Höhe auf komplette Bildschirmhöhe */
            z-index: 9999 !important; /* Höchster Z-Index, damit es über allem liegt */
            box-shadow: none !important; /* Kein Schatten, da es den gesamten Bildschirm füllt */
            backdrop-filter: blur(10px);
            -webkit-backdrop-filter: blur(10px);
            opacity: 0;
            pointer-events: none;
            transition: opacity 0.3s cubic-bezier(.4,0,.2,1);
            touch-action: pan-y !important; /* Erlaubt vertikales Scrollen auf Touch-Geräten */
            -webkit-overflow-scrolling: touch !important; /* Smooth scrolling auf iOS */
            user-select: text;
            overflow-y: auto !important; /* Scrollbar für Überläufe */
            translate: none !important; /* Verhindert mögliche Transform-Konflikte */
            inset: 0 !important; /* Zusätzliche Sicherheit für die Positionierung */
        }
        
        #highscore-modal::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            border-radius: 11px;
            box-shadow: inset 0 0 15px 3px rgba(139, 69, 19, 0.5);
            z-index: -1;
            pointer-events: none;
        }
        
        #highscore-modal::after {
            /* Emblem/Trophäe entfernt */
            content: none;
            display: none;
        }
        
        #highscore-modal.active {
                opacity: 1;
            pointer-events: all;
            top: 0 !important; /* Nochmal sicherstellen dass es ganz oben bleibt */
        }
        
        #highscore-modal h2 {
            font-family: 'Cinzel', 'Times New Roman', serif;
            color: var(--gold-primary);
            margin-top: 0; /* Kein Abstand nach oben */
            margin-bottom: 12px; /* Reduzierter unterer Abstand */
            font-size: 1.5em;
            text-align: center;
            text-shadow: 0 2px 4px rgba(0,0,0,0.4);
            letter-spacing: 0.05em;
            position: relative;
        }
        
        #highscore-modal h2::after {
            content: '';
            position: absolute;
            bottom: -10px;
            left: 50%;
            transform: translateX(-50%);
            width: 80%;
            height: 1px;
            background: linear-gradient(90deg, 
                transparent 0%, 
                rgba(212, 175, 55, 0.3) 20%, 
                rgba(212, 175, 55, 0.7) 50%, 
                rgba(212, 175, 55, 0.3) 80%, 
                transparent 100%);
        }
        .highscore-list {
            width: 100%;
            margin-top: 5px !important; /* Minimaler Abstand nach oben */
            margin-bottom: 5px !important; /* Minimaler Abstand nach unten */
            max-height: 90vh !important; /* Noch größere maximale Höhe */
            overflow-y: auto !important;
            padding-right: 8px;
            -webkit-overflow-scrolling: touch !important; /* Smooth scrolling auf iOS */
            touch-action: pan-y !important; /* Erlaubt vertikales Scrollen auf Touch-Geräten */
        }
        
        /* Stile für Vollbild-Modus */
        #highscore-modal.active .highscore-list {
            max-height: calc(100vh - 100px) !important; /* Mehr Platz für die Liste */
        }
        .highscore-list::-webkit-scrollbar {
            width: 8px;
            background: transparent;
        }
        .highscore-list::-webkit-scrollbar-track {
            background: rgba(0,0,0,0.2);
            border-radius: 4px;
            margin: 4px 0;
        }
        .highscore-list::-webkit-scrollbar-thumb {
            background: var(--gold-secondary);
            border-radius: 4px;
            min-height: 40px; /* Mindesthöhe für bessere Touch-Interaktion */
        }
        .highscore-list::-webkit-scrollbar-thumb:hover {
            background: var(--gold-primary);
        }
        .highscore-entry {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 3px 6px !important; /* Noch weiter reduzierte Abstände */
            border-bottom: 1px solid rgba(212, 175, 55, 0.15);
            font-size: 0.9em !important; /* Noch kleinere Schriftgröße */
            font-family: 'Cormorant Garamond', 'Georgia', serif;
            transition: all 0.2s ease;
            position: relative;
            margin-bottom: 0 !important; /* Entferne jeglichen unteren Abstand */
            line-height: 1.3 !important; /* Zeilenhöhe reduzieren */
        }
        
        .highscore-entry:hover {
            background: rgba(212, 175, 55, 0.08);
            border-radius: 5px;
        }
        
        .highscore-entry.own {
            background: linear-gradient(90deg, rgba(212, 175, 55, 0.15) 0%, rgba(212, 175, 55, 0.05) 100%);
            border-radius: 7px;
            font-weight: bold;
            border-left: 3px solid var(--gold-primary);
            padding-left: 12px;
        }
        
        .highscore-entry.own:hover {
            background: linear-gradient(90deg, rgba(212, 175, 55, 0.2) 0%, rgba(212, 175, 55, 0.1) 100%);
        }
        
        .highscore-rank {
            width: 2.5em;
            text-align: center;
            font-size: 1.1em;
            font-weight: bold;
            color: var(--gold-primary);
            text-shadow: 0 1px 1px rgba(0,0,0,0.4);
        }
        
        .highscore-name {
            flex: 1;
            text-align: left;
            margin-left: 10px;
            letter-spacing: 0.02em;
        }
        
        .highscore-score {
            width: 4em;
            text-align: right;
            font-variant-numeric: tabular-nums;
            font-weight: bold;
            color: #f5e6c5;
        }
        
        .highscore-trophy {
            font-size: 1.1em;
            margin-right: 3px;
            color: var(--gold-primary);
            text-shadow: 0 1px 2px rgba(0,0,0,0.4);
        }
        .close-x-button {
            position: absolute;
            top: 10px;
            right: 10px;
            width: 30px;
            height: 30px;
            background: linear-gradient(to bottom, var(--gold-primary), var(--gold-secondary));
            color: var(--dark-brown);
            border: 1px solid rgba(139, 69, 19, 0.5);
            border-radius: 50%;
            cursor: pointer;
            font-weight: bold;
            font-size: 1.5em;
            line-height: 0.9;
            text-align: center;
            box-shadow: 0 2px 5px rgba(0,0,0,0.3);
            transition: all 0.25s ease;
            z-index: 10;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        
        .close-x-button:hover {
            transform: scale(1.1);
            box-shadow: 0 3px 8px rgba(0,0,0,0.45);
            background: linear-gradient(to bottom, #ffe082, var(--gold-primary));
        }
        
        .medieval-scroll-ornament {
            margin: 10px auto 5px;
            text-align: center;
            opacity: 0.6;
        }
        #start-screen .menu-container {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            width: 100%;
            max-width: 100vw;
            gap: 10px;
            margin-top: 12px;
        }
        
        #start-screen .menu-button {
            background: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiPjxkZWZzPjxwYXR0ZXJuIGlkPSJwYXR0ZXJuIiBwYXR0ZXJuVW5pdHM9InVzZXJTcGFjZU9uVXNlIiB3aWR0aD0iMTAwIiBoZWlnaHQ9IjEwMCI+PHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEwMCIgaGVpZ2h0PSIxMDAiIGZpbGw9InJnYmEoMTg4LCAxNjQsIDEyMCwgMC45KSIvPjxwYXRoIGQ9Ik0tMjUgNTAgbDUwIC0yNSBsNTAgMjUgbDUwIC0yNSBsNTAgMjUiIHN0cm9rZT0icmdiYSgxMDAsIDgwLCA1MCwgMC4yKSIgc3Ryb2tlLXdpZHRoPSIwLjUiIGZpbGw9Im5vbmUiLz48L3BhdHRlcm4+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjcGF0dGVybikiLz48L3N2Zz4=');
            background-color: rgba(100, 75, 35, 0.9);
            border: 2px solid #6b4c28;
            border-radius: 8px;
            color: #e9d9b2;
            padding: 0.5em 1em;
            font-size: 1rem;
            font-family: 'Cinzel', 'Times New Roman', serif;
            font-weight: 700;
            cursor: pointer;
            transition: all 0.22s cubic-bezier(0.175, 0.885, 0.32, 1.275);
            text-transform: uppercase;
            letter-spacing: 0.07em;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.4), inset 0 0 15px rgba(219, 188, 118, 0.2);
            width: 100%;
            max-width: 240px;
            position: relative;
            display: flex;
            align-items: center;
            justify-content: center;
            text-align: center;
            overflow: hidden;
            text-shadow: 0 1px 1px rgba(0, 0, 0, 0.6);
            height: 36px;
        }
        
        #start-screen .menu-button::before,
        #start-screen .menu-button::after {
            content: '';
            position: absolute;
            width: 100%;
            height: 100%;
            top: 0;
            left: 0;
            pointer-events: none;
            border-radius: 10px;
        }
        
        #start-screen .menu-button::before {
            background: linear-gradient(45deg, transparent 20%, rgba(186, 161, 106, 0.25) 40%, transparent 80%);
        }
        
        #start-screen .menu-button::after {
            background: linear-gradient(to right, transparent, rgba(219, 188, 118, 0.15) 50%, transparent);
            background-size: 200% 100%;
            background-position: 100% 0;
            transition: background-position 0.8s;
        }
        
        #start-screen .menu-button .button-ornament {
            position: absolute;
            width: 22px;
            height: 22px;
            background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCI+PHBhdGggZmlsbD0iI2Q5YmU3NiIgZD0iTTEyLDIyQzYuNDcsMjIgMiwxNy41MyAyLDEyQzIsNi40NyA2LjQ3LDIgMTIsMkMxNy41MywyIDIyLDYuNDcgMjIsMTJDMjIsMTcuNTMgMTcuNTMsMjIgMTIsMjJNMTIsNUM4LjEzLDUgNSw4LjEzIDUsMTJDNSwxNS44NyA4LjEzLDE5IDEyLDE5QzE1Ljg3LDE5IDE5LDE1Ljg3IDE5LDEyQzE5LDguMTMgMTUuODcsNSAxMiw1TTEyLDhWMTNMMTUuNjEsMTUuMDZMMTQuODcsMTYuMzNMMTAuNjEsMTRWOC4yM0gxMnoiLz48L3N2Zz4=');
            opacity: 0.8;
        }
        
        #start-screen .menu-button .left-ornament {
            left: 6px;
            top: 50%;
            transform: translateY(-50%);
        }
        
        #start-screen .menu-button .right-ornament {
            right: 6px;
            top: 50%;
            transform: translateY(-50%);
        }
        
        #start-screen .menu-button .button-text {
            position: relative;
            z-index: 1;
        }
        
        #start-screen .menu-button:last-child {
            margin-bottom: 0;
        }
        
        #start-screen .menu-button:hover {
            transform: translateY(-2px) scale(1.02);
            box-shadow: 0 6px 12px rgba(0, 0, 0, 0.4), inset 0 0 15px rgba(219, 188, 118, 0.35);
            border-color: #876231;
            color: #f0e0c0;
        }
        
        #start-screen .menu-button:hover::after {
            background-position: 0 0;
        }
        
        #start-screen .menu-button:active {
            transform: translateY(1px) scale(0.98);
            box-shadow: 0 3px 6px rgba(0, 0, 0, 0.4), inset 0 0 10px rgba(186, 161, 106, 0.3);
            transition-duration: 0.1s;
            background-color: rgba(85, 60, 30, 0.95);
        }
        
        @media (max-width: 600px) {
            #start-screen .menu-button { 
                font-size: 0.85rem; 
                padding: 0.4rem 0.8rem; 
                max-width: 220px;
                height: 32px;
            }
            #start-screen .menu-container { 
                gap: 8px;
                margin-top: 8px;
            }
            #start-screen .menu-button .button-ornament {
                width: 18px;
                height: 18px;
            }
        }
        #start-screen .menu-button::before,
        #start-screen .menu-button::after {
            color: #d4af37;
        }
        .version-display {
            font-family: 'Cormorant Garamond', serif;
            font-size: 0.9rem;
            color: rgba(212, 175, 55, 0.8);
            position: absolute;
            bottom: 15px;
            right: 15px;
            text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
        }
        
        .copyright {
            font-family: 'Cinzel', 'Times New Roman', serif;
            font-size: 0.9rem;
            color: rgba(212, 175, 55, 0.7);
            position: absolute;
            bottom: 15px;
            left: 0;
            right: 0;
            text-align: center;
            text-shadow: 1px 1px 2px rgba(0,0,0,0.7);
            letter-spacing: 0.05em;
        }