/*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
        /*++++++++++++++++++++++++++++++++++ GENERAL PAGE STRUCTURE ++++++++++++++++++++++++++++++++++*/
        /*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/

        @media all and (min-width: 0px) { 
            body, html {
                margin: 0;
                padding: 0;
                height: 100%;
                font-family: Arial, sans-serif;
                background-color: #111;
                color: #eee;
                overflow: hidden;
            }

            #game-wrapper {
                position: absolute;
                top: 0;
                left: 0;
                right: 0;
                bottom: 0;
            }

            .main-container {
                display: flex;
                flex-direction: column;
                height: 100%;
            }

            .game-area {
                display: flex;
                flex: 1;
                overflow: hidden;
            }

            #background-slideshow {
                position: fixed;
                top: 0; left: 0; right: 0; bottom: 0;
                width: 100vw;
                height: 100vh;
                z-index: 1;
                background-size: cover;
                background-position: center;
                transition: opacity 1.5s ease-in-out, background-image 1.5s ease-in-out;
                opacity: 1;
                pointer-events: none;
                background-color: black;
            }

            #background-slideshow.blurred {
                filter: blur(8px);
            }

            .hidden {
                display: none;
            }
        }

        /*------------------------------------------------------ Background Map Container ------------------------------------------------------*/
        
        @media all and (min-width: 0px) {
            .map-container {
                flex: 4;
                position: relative;
                background: url('../../source/maps/map_placeholder.png');
                background-position: center center;
                background-size: cover;
                background-repeat: no-repeat;
                background-color: #000;
                overflow: hidden;
            }

            #weather-canvas {
                position: absolute;
                top: 0;
                left: 0;
                z-index: 10;
                width: 100%;
                height: 100%;
                pointer-events: none;
            }
        }
        
        /*------------------------------------------------------ Mapmarker Citymap ------------------------------------------------------*/

        @media all and (min-width: 0px) {
            /*.map-marker-layer {
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                pointer-events: none;
                z-index: 20;
            }*/

            #maincity-markers-layer {
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                pointer-events: none;
                z-index: 20;
            }

            .map-marker {
                position: absolute;
                width: 64px;
                height: 64px;
                background: url('../../source/maps/marker/marker_exploration.png') no-repeat center center;
                background-size: contain;
                pointer-events: auto;
                cursor: pointer;
            }

            .map-marker:hover {
                transform: scale(1.2);
                z-index: 1000;
            }

            .marker-editor-ui {
                position: absolute;
                top: 100px;
                right: 40px;
                z-index: 8999;
                width: 100%;
                max-width: 400px;
                background: #222;
                color: #fff;
                border: 2px solid #a28c60;
                padding: 15px;
                border-radius: 12px;
                box-shadow: 0 0 15px rgba(0, 0, 0, 0.5);
                pointer-events: auto;
            }
            .marker-editor-ui input, .marker-editor-ui select {
                width: 100%;
                margin-bottom: 8px;
                padding: 4px;
                background: #333;
                color: #fff;
                border: 1px solid #888;
            }
            .marker-editor-ui button {
                margin-right: 8px;
            }

            .marker-tooltip {
                position: absolute;
                min-width: 200px;
                background: #222;
                color: #fff;
                padding: 10px;
                border: 2px solid #a28c60;
                border-radius: 10px;
                z-index: 8999;
                pointer-events: none;
                font-family: sans-serif;
                box-shadow: 0 0 15px rgba(0, 0, 0, 0.5);
            }

            .tooltip-icons {
                margin-top: 10px;
                display: flex;
                gap: 6px;
                flex-wrap: wrap;
            }

            .tooltip-icons img {
                width: 32px;
                height: 32px;
                pointer-events: none;
            }

            .marker-tooltip.danger {
                border-color: #ff4444;
                box-shadow: 0 0 10px #ff4444;
            }
            .marker-tooltip.safe {
                border-color: #4caf50;
                box-shadow: 0 0 10px #4caf50;
            }

            #ghost-marker {
                width: 32px;
                height: 32px;
                transform: translate(-50%, -50%);
                opacity: 0.8;
            }
        }

        /*------------------------------------------------------ Worldmap ------------------------------------------------------------------------------------ */

        @media all and (min-width: 0px) {
            .worldmap-container {
                position: absolute;
                top: 0;
                left: 0;
                z-index: 2; /* Unter dem Wetter-Canvas (z-index 10), über dem Hintergrund */
                width: 100%;
                height: 100%;
                /*background-size: cover;*/
                background-position: center center;
                background-repeat: no-repeat;
                display: none; /* Anfangszustand: versteckt */
            }

            #worldmap-viewport {
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                overflow: hidden;
                z-index: 5; /* Unter Wettercanvas, über Stadthintergrund */
                display: none;
                justify-content: center;
                align-items: center;
            }

            /* Wrapper mit fixer Bildgröße */
            #worldmap-wrapper {
                position: relative;
                width: 2300px;
                height: 1200px;
                margin: 0 auto;
            }

            /* Hintergrundbild */
            #worldmap-container {
                position: relative;
                top: 0;
                left: 0;
                width: 2300px;
                height: 1200px;
                background-repeat: no-repeat;
                background-size: contain;
                background-position: center;
            }

            /* Marker-Ebene, exakt gleich groß */
            #worldmap-markers-layer {
                position: absolute;
                top: 0;
                left: 0;
                width: 2300px;
                height: 1200px;
                pointer-events: none;
                z-index: 7;
            }

            #worldmap-path-canvas {
                position: absolute;
                top: 0;
                left: 0;
                z-index: 5;  /* unter travel-canvas */
                pointer-events: none;
            }
            #worldmap-travel-canvas {
                position: absolute;
                top: 0;
                left: 0;
                z-index: 6;  /* oberhalb für Animation */
                pointer-events: none;
            }

            #gm-travelpath-toggle {
                position: fixed;
                bottom: 130px;
                left: 10px;
                font-size: 22px;
                cursor: pointer;
                z-index: 2000;
                /*background: rgba(255, 255, 255, 0.9);*/
                padding: 5px 8px;
                border-radius: 6px;
                box-shadow: 0 0 5px rgba(0,0,0,0.2);
            }

            #gm-travelpath-close {
                position: absolute;
                top: 10px;
                right: 10px;
                font-size: 20px;
                cursor: pointer;
                padding: 2px 6px;
                border-radius: 5px;
                z-index: 10001;
                pointer-events: auto;
            }

            .travelworldmap-tooltip {
                position: absolute;
                background: rgba(0, 0, 0, 0.85);
                color: white;
                padding: 10px 14px;
                border-radius: 10px;
                z-index: 99999;
                box-shadow: 0 0 10px rgba(0, 0, 0, 0.4);
                font-family: 'Crimson Pro', serif;
                max-width: 220px;
                animation: fadeIn 0.2s ease;
            }
            .travelworldmap-tooltip-buttons {
                margin-top: 8px;
                display: flex;
                justify-content: space-between;
            }
            .travelworldmap-tooltip button {
                background: #a28c60;
                color: white;
                border: none;
                padding: 4px 8px;
                border-radius: 6px;
                cursor: pointer;
            }
            .travelworldmap-tooltip button:hover {
                background: #c8b48d;
            }
            @keyframes fadeIn {
                from { opacity: 0; transform: translateY(-10px); }
                to { opacity: 1; transform: translateY(0); }
            }
        }

        /*------------------------------------------------------ Login, Character-Selection and Creation ---------------------------------*/

        @media all and (min-width: 0px) {
            #login-screen {
                position: relative;
                z-index: 1000;
                top: 0; left: 0; right: 0; bottom: 0;
                display: flex;
                justify-content: center;
                align-items: center;
                overflow: hidden;
            }

            #login-container {
                width: 500px;
                min-height: 600px;
                background-color: rgba(0, 0, 0, 0.85);
                border: 3px solid #c2a675;
                border-radius: 18px;
                padding: 20px;
                font-family: 'Crimson Pro', serif;
                color: #f0e6d2;
                box-shadow: 0 0 20px rgba(194, 166, 117, 0.3);
                backdrop-filter: blur(8px);
                margin-top:50px;
            }

            .title {
                text-align: center;
                font-size: 24px;
                margin-bottom: 10px;
                color: #c2a675;
                letter-spacing: 1px;
            }

            label input[type="checkbox"] {
                display: inline-block;
                vertical-align: middle;
                margin-right: 6px;
            }

            label {
                display: inline-flex;
                align-items: center;
                justify-content: flex-start;
                text-align: left;
                margin-top: 10px;
            }

            .tab-header {
                display: flex;
                justify-content: space-around;
                margin: 10px 0 20px 0;
            }

            .tab-button {
                background: #333;
                color: white;
                padding: 8px 12px;
                border: 2px solid #c2a675;
                border-radius: 10px;
                cursor: pointer;
                transition: all 0.2s ease;
            }

            .tab-button.active, .tab-button:hover {
                background: #c2a675;
                color: black;
            }

            .tab-button.disabled {
                opacity: 0.5;
                pointer-events: none;
            }

            .tab-content {
                padding: 10px;
            }

            input, select, button {
                display: block;
                width: 100%;
                padding: 8px;
                margin: 6px 0;
                border-radius: 8px;
                border: 1px solid #999;
                background: rgba(255,255,255,0.1);
                color: #eee;
                font-family: 'Crimson Pro', serif;
            }

            button {
                background: #c2a675;
                color: #111;
                font-weight: bold;
                cursor: pointer;
            }

            .section-title {
                font-size: 20px;
                margin-bottom: 10px;
                text-align: center;
                border-bottom: 2px dashed #c2a675;
                padding-bottom: 4px;
            }

            .image-gallery {
                display: flex;
                gap: 6px;
                flex-wrap: wrap;
            }

            .image-gallery img {
                width: 128px;
                height: 128px;
                object-fit: cover;
                border-radius: 8px;
                border: 2px solid transparent;
                cursor: pointer;
                transition: all 0.2s ease;
            }

            .image-gallery img.selected {
                border-color: #c2a675;
                transform: scale(1.05);
            }

            .disabled-area {
                pointer-events: none;
                opacity: 0.3;
            }

            .character-button.selected {
                border: 2px solid gold;
                background: rgba(255, 255, 200, 0.1);
            }
        }

        /*+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
        /*++++++++++++++++++++++++++++++++++ NAVI BOTTOM GENERAL ++++++++++++++++++++++++++++++++++*/
        /*+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/

        @media all and (min-width: 0px) {
            .navigation-bar {
                display: flex;
                height: 100px;
                z-index: 200;
                background-color: #222;
                border-top: 2px solid #333;
            }

            .nav-section {
                display: flex;
                align-items: center;
                justify-content: center;
                padding: 5px 10px;
                border-left: 1px solid #333;
            }

            .nav-section:first-child {
                border-left: none;
            }
        }

        /*------------------------------------------------------ Navigation Bottom ------------------------------------------------------*/

        @media all and (min-width: 0px) {
            #logout-settings {
                flex: 0.7;
                display: flex;
                flex-direction: row;
                justify-content: center;
                align-items: center;
                gap: 10px;
            }

            #logout-settings button:hover {
                background-color: #666;
            }

            #logout-settings button {
                margin: 5px;
                padding: 8px 12px;
                background-color: #444;
                border: none;
                color: #eee;
                cursor: pointer;
            }
        
            #navigation {
                flex: 3;
                justify-content: center;
                gap: 10px;
            }

            #navigation button {
                margin: 0 5px;
                padding: 10px 15px;
                background-color: #444;
                border: none;
                color: #eee;
                cursor: pointer;
                white-space: nowrap;
            }

            #navigation button:hover {
                background-color: #666;
            }

            .nav-icon {
                width: 64px;
                height: 64px;
                cursor: pointer;
                transition: transform 0.2s, filter 0.2s;
                margin: 0 6px;
            }

            .nav-icon:hover {
                transform: scale(1.05);
                filter: brightness(1.2);
            }

            .nav-icon.active-icon {
                filter: brightness(1.2) drop-shadow(0 0 6px #aaa);
                transform: scale(1.05);
            }

            .popup-overlay {
                position: absolute;
                bottom: 100px;
                left: 50%;
                transform: translateX(-50%);
                width: 700px;
                height: calc(100vh - 150px);
                padding: 20px;
                overflow-y: auto;
                z-index: 1000;
                opacity: 0;
                pointer-events: none;
                transition: opacity 0.15s ease;
                border-radius: 12px;
                box-shadow: 0 0 14px rgba(0, 0, 0, 0.4);
            }

            .popup-overlay.open {
                padding: 20px;
                visibility: visible;
                opacity: 1;
                pointer-events: auto;
            }

            .popup-content {
                height: 100%;
                overflow-y: auto;
                padding: 20px;
                box-sizing: border-box;
                color: #eee;
                font-family: 'Crimson Pro', serif;
                font-size: 16px;
                text-shadow: 0 1px 3px #000;
            }

            .popup-content h2 {
                text-align:center;
            }
        }

        /*------------------------------------------------------ Weather, Date, Clock ------------------------------------------------------*/

        @media all and (min-width: 0px) {
            #weather {
                flex: 1.5;
                flex-direction: column;
                font-size: 14px;
            }

            .weather-popup {
                position: absolute;
                z-index: 2000;
                background-size: cover;
                background-position: center;
                border: 2px solid #aa9966;
                border-radius: 10px;
                box-shadow: 0 0 10px rgba(0,0,0,0.3);
                padding: 15px;
                width:256px;
                height:256px;
                transform: translateY(-100%);
                font-family: 'Crimson Pro', serif;
                color: #fff; /* Textfarbe für besseren Kontrast */
            }

            .weather-popup-content {
                text-align: center;
                padding: 10px;
                border-radius: 8px;
            }

            .weather-popup-content h3,
            .weather-popup-content p {
                color: #fff;
                text-shadow:
                    -2px -2px 2px #000,
                    2px -2px 2px #000,
                    -2px  2px 2px #000,
                    2px  2px 2px #000;
            }

            #weather-popup-close {
                padding: 4px 10px;
                font-size: 14px;
                background-color: #c9b693;
                border: none;
                border-radius: 5px;
                cursor: pointer;
            }
        }

        /*-------------------------------------------------------Weather Overlay ------------------------------------------------------*/



        /*------------------------------------------------------ Inventory ------------------------------------------------------*/

        @media all and (min-width: 0px) {
            #popup-overlay-inventory {
                background-image: 
                    url('../../source/ui/inventar_background_2.png'),
                    url('../../source/ui/background_skillinfo.jpg');
                background-size: contain, cover;
                background-repeat: no-repeat, no-repeat;
                background-position: center, center;
                position: absolute;
                bottom: 100px;
                left: 50%;
                transform: translateX(-50%);
                max-height: calc(100vh - 100px);
                overflow-y: auto;
                overflow-x: hidden;
                height:auto;
                width: 740px;
                transition: max-height 0.3s ease, opacity 0.2s ease;
                padding: 0px;
                z-index: 1000;
            }

            #popup-overlay-inventory .popup-content {
                padding: 20px 15px 20px 35px;
                margin:0px;
                color: #eee;
                font-family: 'Crimson Pro', serif;
                overflow-y: hidden;
                max-height: 100%;
                min-height: 700px;
                max-height: 800px;
                position: relative;
                width: 100%;
                height: 100%;
            }            
                
            .inventory-legend {
                display: flex;
                flex-direction: column;
                gap: 10px;
            }

            .inventory-legend .filter {
                display: flex;
                align-items: center;
                gap: 8px;
                cursor: pointer;
                color: #eee;
                font-size: 14px;
            }

            .inventory-legend {
                display: flex;
                flex-direction: column;
                gap: 12px;
                padding-left: 15px;
            }

            .inventory-legend .filter {
                width: 48px;
                height: 48px;
                border-radius: 6px;
                cursor: pointer;
                transition: all 0.2s ease;
                padding: 4px;
                background-color: rgba(255, 255, 255, 0.05);
            }
            
            .inventory-legend .filter:hover {
                background-color: rgba(255, 255, 255, 0.15);
            }

            .inventory-legend .filter.active {
                outline: 2px solid #c0a85d;
                background-color: rgba(255, 255, 255, 0.2);
            }

            .inventory-legend {
                display: flex;
                flex-direction: column;
                gap: 6px;
                margin-left: 20px;
            }

            .inventory-legend .filter {
                cursor: pointer;
                padding: 4px;
                border-radius: 6px;
                transition: transform 0.2s, filter 0.2s, box-shadow 0.2s;
            }

            .inventory-legend .filter:hover {
                transform: scale(1.05);
                filter: brightness(1.2);
            }

            .inventory-legend .filter.active {
                box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.5);
                filter: brightness(1.2);
                transform: scale(1.05);
            }

            .inventory-legend .filter img {
                width: 100%;
                height: 100%;
                object-fit: contain;
            }

            .inventory-container {
                display: flex;
                gap: 20px;
            }

            .inventory-grid {
                display: grid;
                grid-template-columns: repeat(8, 64px);
                grid-template-rows: repeat(9, 64px);
                gap: 6px;
                padding: 10px;
                border-radius: 8px;
            }

            .inventory-header {
                display: block;
                margin: 0 auto 15px auto; 
                max-width: 100%;          
            }

            .item-amount {
                position: absolute;
                bottom: 4px;
                right: 6px;
                background-color: rgba(0,0,0,0.7);
                color: #fff;
                padding: 1px 4px;
                border-radius: 4px;
                font-size: 12px;
                font-weight: bold;
                pointer-events: none;
            }
            
            .item-slot {
                width: 64px;
                height: 64px;
                background-color: rgba(20, 20, 20, 0.6);;
                border: 1px solid #888;
                border-radius: 4px;
                position: relative;
            }

            .equipped-item {
                background-color: rgba(255, 255, 180, 0.25);
                border: 1px solid #aaa;
                box-shadow: 0 0 5px rgba(255, 255, 150, 0.4);
            }

            .item-slot:hover .item-tooltip {
                display: block;
            }

            .recharge-overlay {
                position: absolute;
                top: 0; left: 0;
                width: 100%; height: 100%;
                background: rgba(0, 0, 0, 0.65);
                color: white;
                font-size: 12px;
                display: flex;
                justify-content: center;
                align-items: center;
                border-radius: 6px;
                text-shadow: 0 0 4px #000;
            }

            .item-tooltip {
                position: absolute;
                top: 32px;
                left: 32px;
                z-index: 2000;
                display: none;
                min-width: 200px;
                max-width: 280px;
                background-color: rgba(20, 20, 20, 0.95);
                color: #eee;
                padding: 12px;
                border: 1px solid #666;
                border-radius: 6px;
                font-size: 14px;
                white-space: normal;
                text-align: left;
            }

            .tooltip-buttons {
                display: flex;
                justify-content: center;
                gap: 10px;
                margin-top: 10px;
            }

            .tooltip-button {
                width: 32px;
                height: 32px;
                cursor: pointer;
                transition: transform 0.2s ease;
            }

            .tooltip-button:hover {
                transform: scale(1.1);
            }

            .drop-confirm {
                display: flex;
                gap: 5px;
                margin-top: 10px;
                margin-left: 95px;
                font-size: 18px;
                cursor: pointer;
            }

            .confirm-icon {
                cursor: pointer;
                font-size: 18px;
                transition: transform 0.2s;
            }

            .confirm-icon:hover {
                transform: scale(1.2);
            }
        }

        /*------------------------------------------------------ Gear Set ------------------------------------------------------*/

        @media all and (min-width: 0px) {
            #popup-overlay-gear {
                background-image: url('../../source/ui/background_skillinfo.jpg');
                background-attachment: fixed;
                background-size: cover;
                background-repeat: no-repeat;
                background-position: center;
                position: absolute;
                bottom: 100px;
                left: 50%;
                transform: translateX(-50%);
                width: 740px;
                max-height: calc(100vh - 100px);
                overflow-y: auto;
                overflow-x: hidden;
                height: auto;
                transition: max-height 0.3s ease, opacity 0.2s ease;
                padding: 0px;
                z-index: 1000;
            }

            #popup-overlay-gear .gear-content {
                background-image: url('../../source/ui/gear_background2.png');
                background-size: 70% auto;
                background-repeat: no-repeat;
                background-position: center top;
                padding: 20px 0px 0px 0px;
                margin:0px;
                color: #eee;
                font-family: 'Crimson Pro', serif;
                overflow-y: visible;
                position: relative;
                height: auto;
                min-height: 800px;
                max-height: 800px;
                width: 740px;
                max-height: calc(100vh - 100px);
                display: block;
                flex-direction: column;
            }

            .gear-header {
                display: block;
                margin: 0 auto 15px auto; 
                max-width: 100%;          
            }

            .gear-slots {
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                min-height: 800px;
                max-height: 800px;
            }

            .gear-slot {
                position: absolute;
                width: 64px;
                height: 64px;
                background-color: rgba(20, 20, 20, 0.6);
                border: 2px solid #888;
                border-radius: 4px;
            }

            #slot-head         { top: 90px; left: 335px; }
            #slot-torso        { top: 200px; left: 335px; }
            #slot-legs         { top: 530px; left: 415px; }
            #slot-feet         { top: 720px; left: 220px; }
            #slot-arms         { top: 135px; left: 430px; }
            #slot-hands        { top: 320px; left: 110px; }
            #slot-belt         { top: 300px; left: 335px; }
            #slot-necklace     { top: 80px; left: 120px; }
            #slot-ring-right   { top: 340px; left: 15px; }
            #slot-ring-left    { top: 340px; left: 640px; }
            #slot-backpack     { top: 80px; left: 540px; }
            #slot-weapon-right { top: 460px; left: 75px; }
            #slot-weapon-left  { top: 460px; left: 590px; }

            .gear-info-box-armor {
                position: absolute;
                width: 130px;
                height: auto;
                background-color: rgba(10,10,10,0.5);
                color: #eee;
                font-size: 16px;
                padding: 10px;
                border-radius: 8px;
                border: 1px solid #555;
                font-family: 'Crimson Pro', serif;
            }

            .gear-info-box-resist {
                position: absolute;
                width: 130px;
                height: auto;
                background-color: rgba(10,10,10,0.5);
                color: #eee;
                font-size: 16px;
                padding: 10px;
                border-radius: 8px;
                border: 1px solid #555;
                font-family: 'Crimson Pro', serif;
            }

            #gear-armor-summary {
                top: 620px;
                left: 35px;
            }

            #gear-resist-summary {
                top: 620px;
                left: 540px;
            }

            .armor-values {
                display: flex;
                justify-content: space-between;
                align-items: center;
                gap: 10px;
            }

            .armor-total {
                font-size: 36px;
                font-weight: bold;
                color: #fff2cc;
                text-shadow: 1px 1px 2px #000;
                padding-right: 20px;
            }

            .armor-partial {
                font-weight: bold;
            }

            .gear-add-button {
                position: absolute;
                bottom: 4px;
                right: 4px;
                font-size: 18px;
                cursor: pointer;
                color: #ccc;
                background: rgba(0, 0, 0, 0.6);
                border-radius: 4px;
                padding: 0 4px;
                transition: transform 0.2s;
            }
            .gear-add-button:hover {
                transform: scale(1.2);
                color: #fff;
            }

            .gear-slot:hover .item-tooltip {
                display: block;
            }
        }

        /*------------------------------------------------------ Skilltreepopup ------------------------------------------------------*/

        @media all and (min-width: 0px) {
            #popup-overlay-skilltree {
                background-image:
                    url('../../source/ui/travel_background4.png'),
                    url('../../source/ui/background_skillinfo.jpg');
                background-size: contain, cover;
                background-repeat: no-repeat, no-repeat;
                background-position: center, center;
                position: absolute;
                bottom: 100px;
                left: 50%;
                transform: translateX(-50%);
                max-height: calc(100vh - 100px);
                overflow-y: auto;
                overflow-x: hidden;
                height: auto;
                width: 840px;
                transition: max-height 0.3s ease, opacity 0.2s ease;
                padding: 0px;
                z-index: 1000;
            }

            #popup-overlay-skilltree .skilltree-content {
                padding: 20px 0;
                margin: 0;
                color: #eee;
                font-family: 'Crimson Pro', serif;
                overflow-y: auto;
                min-height: 780px;
                position: relative;
                max-height: calc(100vh - 100px);
                width: 840px;
                height: auto;
                display: flex;
                flex-direction: column;
                align-items: center;
            }

            #skilltree-canvas-container {
                position: relative;
                width: 800px;
                height: 700px;
                margin: 0 auto;
                border: 2px solid rgba(255,255,255,0.15);
                box-shadow: 0 0 20px rgba(0,0,0,0.6);
                background-color: rgba(0,0,0,0.35);
                border-radius: 12px;
                overflow: hidden;
            }

            .skilltree-tooltip {
                background-color: rgba(0, 0, 0, 0.85);
                color: #fff;
                padding: 12px 16px;
                border-radius: 10px;
                box-shadow: 0 0 10px black;
                font-family: 'Cinzel', serif;
                font-size: 14px;
                position: absolute;
                z-index: 8999;
                width: 260px;
                min-height: 100px;
                overflow-wrap: break-word;
                white-space: normal;
                transition: opacity 0.2s ease;
            }

            .skilltree-tooltip h3 {
                margin-top: 0;
                font-size: 16px;
                color: #ffe;
            }

            .skilltree-header {
                display: block;
                margin: 0 auto 15px auto;
                max-width: 100%;
            }
        }

        /*------------------------------------------------------ Compendiumpopup ------------------------------------------------------*/
        
        @media all and (min-width: 0px) {
            #popup-overlay-compendium {
                background-image: 
                    url('../../source/ui/compendium_background2.png'),
                    url('../../source/ui/background_skillinfo.jpg');
                background-size: contain, cover;
                background-repeat: no-repeat, no-repeat;
                background-position: center, center;
                position: absolute;
                bottom: 100px;
                left: 50%;
                transform: translateX(-50%);
                max-height: calc(100vh - 100px);
                overflow-y: auto;
                overflow-x: hidden;
                height:auto;
                width: 740px;
                transition: max-height 0.3s ease, opacity 0.2s ease;
                padding: 0px;
                z-index: 1000;
            }

            #popup-overlay-compendium .compendium-content {
                padding: 20px 15px 20px 35px;
                margin:0px;
                color: #eee;
                font-family: 'Crimson Pro', serif;
                overflow-y: hidden;
                max-height: 100%;
                min-height: 780px;
                position: relative;
                width: 100%;
                height: 100%;
            }

            .compendium-header {
                display: block;
                margin: 0 auto 15px auto; 
                max-width: 100%;          
            }

            .compendium-sidebar {
                position: absolute;
                right: 50px;
                top: 90px;
                width: 60px;
                display: flex;
                flex-direction: column;
                gap: 12px;
            }

            .compendium-sidebar .category-button {
                width: 48px;
                height: 48px;
                background-color: rgba(255,255,255,0.05);
                border-radius: 6px;
                cursor: pointer;
                padding: 4px;
                transition: all 0.2s ease;
            }

            .compendium-sidebar .category-button:hover,
            .compendium-sidebar .category-button.active {
                background-color: rgba(255,255,255,0.15);
                outline: 2px solid #c0a85d;
            }

            .compendium-entrylist {
                position: absolute;
                right: 120px;
                top: 90px;
                width: 90px;
                max-height: 650px;
                overflow-y: auto;
                display: flex;
                flex-direction: column;
                gap: 10px;
            }

            .compendium-entry {
                background-color: rgba(255,255,255,0.05);
                padding: 6px 10px;
                border-radius: 6px;
                cursor: pointer;
                font-size: 14px;
                color: #eee;
                transition: background 0.2s ease;
            }

            .compendium-entry:hover {
                background-color: rgba(255,255,255,0.15);
            }

            .compendium-entry img {
                width: 48px;
                height: 48px;
                object-fit: contain;
                display: block;
                margin: auto;
            }

            .compendium-detail-view {
                margin-top: 30px;
                padding: 20px 30px;
                background-color: rgba(0, 0, 0, 0.4);
                border-radius: 12px;
                color: #eee;
                font-family: 'Crimson Pro', serif;
                max-width: 470px;
                max-height: 650px;
                overflow-y: auto;
                position: relative;
            }

            .compendium-detail-header {
                display: flex;
                justify-content: space-between;
                align-items: flex-start;
            }

            .compendium-detail-header h2 {
                font-size: 20px;
                color: #ffd680;
                margin: 0;
                flex-grow: 1;
            }

            .detail-image {
                width: 192px;
                height: auto;
                object-fit: cover;
                border-radius: 10px;
                margin-left: 20px;
                margin-bottom: 10px;
                float: right;
            }

            .compendium-detail-body {
                margin-top: 20px;
                font-size: 15px;
                line-height: 1.5;
            }
        }
        
        /*------------------------------------------------------ Telefonpopup ------------------------------------------------------*/

        @media all and (min-width: 0px) {
            #popup-overlay-telefon {
                background-image:
                    url('../../source/ui/telefon_background2.png'),
                    url('../../source/ui/background_skillinfo.jpg');
                background-size: contain, cover;
                background-repeat: no-repeat, no-repeat;
                background-position: center, center;
                position: absolute;
                bottom: 100px;
                left: 50%;
                transform: translateX(-50%);
                max-height: calc(100vh - 100px);
                overflow-y: auto;
                overflow-x: hidden;
                height:auto;
                width: 740px;
                transition: max-height 0.3s ease, opacity 0.2s ease;
                padding: 0px;
                z-index: 1000;
            }

            #popup-overlay-telefon .telefon-content {
                padding: 20px 15px 20px 35px;
                margin:0px;
                color: #eee;
                font-family: 'Crimson Pro', serif;
                overflow-y: hidden;
                max-height: 100%;
                min-height: 780px;
                position: relative;
                width: 100%;
                height: 100%;
            }

            .telefon-header {
                display: block;
                margin: 0 auto 15px auto; 
                max-width: 100%;          
            }

            .telefon-sidebar {
                position: absolute;
                right: 50px;
                top: 90px;
                width: 60px;
                display: flex;
                flex-direction: column;
                gap: 12px;
            }

            .telefon-sidebar .category-button {
                width: 48px;
                height: 48px;
                background-color: rgba(255,255,255,0.05);
                border-radius: 6px;
                cursor: pointer;
                padding: 4px;
                transition: all 0.2s ease;
            }

            .telefon-sidebar .category-button.active {
                background-color: rgba(255, 255, 255, 0.15);
                outline: 2px solid #c0a85d;
                box-shadow: 0 0 8px 2px rgba(192, 168, 93, 0.7);
            }

            .telefon-sidebar .category-button:hover {
                background-color: rgba(255,255,255,0.15);
                outline: 2px solid #c0a85d;
            }

            .telefon-entrylist {
                position: absolute;
                right: 120px;
                top: 90px;
                width: 60px;
                max-height: 650px;
                overflow-y: auto;
                display: flex;
                flex-direction: column;
                gap: 10px;
            }

            .telefon-entry {
                background-color: rgba(255,255,255,0.05);
                padding: 6px 10px;
                border-radius: 6px;
                cursor: pointer;
                font-size: 14px;
                color: #eee;
                transition: background 0.2s ease;
            }

            .telefon-entry.active {
                background-color: rgba(255, 255, 255, 0.15);
                outline: 2px solid #aaffaa;
                box-shadow: 0 0 8px 2px rgba(170, 255, 170, 0.4);
            }

            .telefon-chat-container {
                margin-top: 20px;
                padding: 20px;
                background-color: rgba(0, 20, 0, 0.5);
                border-radius: 12px;
                color: #cde8c7;
                font-family: 'Crimson Pro', serif;
                max-width: 500px;
                min-height: 450px;
                max-height: 650px;
                overflow-y: auto;
                position: relative;
                display: flex;
                flex-direction: column;
            }

            .telefon-chat-header {
                font-size: 16px;
                font-weight: bold;
                margin-bottom: 10px;
                display: flex;
                justify-content: space-between;
                color: #aaffaa;
            }

            #chat-npc-relationship {
                font-style: italic;
                color: #ffd680;
            }

            .chat-messages {
                flex-grow: 1;
                overflow-y: auto;
                padding: 10px;
                background-color: rgba(0, 0, 0, 0.6);
                border-radius: 6px;
                margin-bottom: 10px;
                max-height: 350px;
            }

            .chat-message {
                margin: 5px 0;
                line-height: 1.4;
            }

            .chat-message.user {
                text-align: right;
                color: #aaffff;
            }

            .chat-message.npc {
                text-align: left;
                color: #ffe6aa;
            }

            .chat-input-row {
                display: flex;
                gap: 10px;
                align-items: center;
            }

            #chat-input {
                flex-grow: 1;
                padding: 8px;
                border-radius: 6px;
                border: none;
                font-size: 14px;
                background-color: #1f1f1f;
                color: #fff;
            }

            .chat-button {
                width: 64px;
                height: auto;
                cursor: pointer;
                transition: transform 0.2s;
            }

            .chat-button:hover {
                transform: scale(1.1);
            }

            .chat-message mark {
                background-color: #ffcc33;
                color: #000;
                padding: 1px 3px;
                border-radius: 3px;
            }

            .chat-message.active-search {
                outline: 2px solid #ffaa00;
                background-color: rgba(255, 255, 0, 0.08);
            }
        }

        /*------------------------------------------------------ Travelpopup ------------------------------------------------------*/

        @media all and (min-width: 0px) {
            #popup-overlay-travel {
                background-image:
                    url('../../source/ui/travel_background4.png'),
                    url('../../source/ui/background_skillinfo.jpg');
                background-size: contain, cover;
                background-repeat: no-repeat, no-repeat;
                background-position: center, center;
                position: absolute;
                bottom: 100px;
                left: 50%;
                transform: translateX(-50%);
                max-height: calc(100vh - 100px);
                overflow-y: auto;
                overflow-x: hidden;
                height:auto;
                width: 840px;
                transition: max-height 0.3s ease, opacity 0.2s ease;
                padding: 0px;
                z-index: 1000;
            }

            #popup-overlay-travel .travel-content {
                padding: 20px 0px 20px 0px;
                margin:0px;
                color: #eee;
                font-family: 'Crimson Pro', serif;
                overflow-y: hidden;
                min-height: 780px;
                position: relative;
                max-height: calc(100vh - 100px);
                width: 840px;
                height: auto;
                display: block;
                flex-direction: column;
            }

            .travel-header {
                display: block;
                margin: 0 auto 15px auto; 
                max-width: 100%;          
            }

            #travel-map-container {
                position: relative;
                width: 800px;
                height: 700px;
                margin: 0 0;
            }

            #travel-connections {
                position: absolute;
                top: 0;
                left: 0;
                z-index: 1;
                width: 800px;
                height: 700px;
                pointer-events: none;
            }

            #travel-earth {
                position: absolute;
                top: 50%;
                left: 50%;
                width: 96px;
                height: 96px;
                transform: translate(-50%, -50%);
                z-index: 2;
            }

            #travel-worlds {
                position: absolute;
                top: 0;
                left: 0;
                width: 800px;
                height: 700px;
                z-index: 3;
            }

            .travel-world {
                position: absolute;
                width: 92px;
                height: 92px;
                transform: translate(-50%, -50%) scale(1);
                cursor: pointer;
                transition: transform 0.3s ease, filter 0.3s ease;
            }

            .current-world {
                animation: pulseWorld 1.5s infinite;
                filter: drop-shadow(0 0 8px rgba(255, 255, 200, 0.8));
                transform-origin: center center;
            }

            @keyframes pulseWorld {
                0%   { transform: translate(-50%, -50%) scale(1); filter: drop-shadow(0 0 4px rgba(255, 255, 200, 0.4)); }
                50%  { transform: translate(-50%, -50%) scale(1.1); filter: drop-shadow(0 0 10px rgba(255, 255, 200, 0.9)); }
                100% { transform: translate(-50%, -50%) scale(1); filter: drop-shadow(0 0 4px rgba(255, 255, 200, 0.4)); }
            }

            .travel-tooltip {
                background-color: rgba(0, 0, 0, 0.85);
                color: white;
                padding: 12px 16px;
                border-radius: 10px;
                box-shadow: 0 0 10px black;
                font-family: Cinzel, serif;
                font-size: 14px;
                position: absolute;
                z-index: 8999;

                width: 260px;
                min-height: 150px;
                overflow-wrap: break-word;
                white-space: normal;
                transition: opacity 0.2s ease;
            }

            .travel-tooltip h3 {
                margin-top: 0;
                font-size: 16px;
                color: #ffe;
            }

            .travel-button {
                width: 32px;
                height: 32px;
                cursor: pointer;
                margin-top: 8px;
            }
        }

        /*------------------------------------------------------ Settingspopup ------------------------------------------------------*/

        @media all and (min-width: 0px) {
            #popup-overlay-settings {
                background-image: url('../../source/ui/background_skillinfo.jpg');
                background-size: cover;
                background-repeat: no-repeat;
                background-position: center center;
                position: absolute;
                bottom: 100px;
                left: 50%;
                transform: translateX(-50%);
                height: calc(100vh - 100px);
                width: 740px;
                z-index: 1000;
                padding: 0;
                overflow: hidden;
            }

            #popup-overlay-settings .settings-content {
                font-family: 'Crimson Pro', serif;
                color: #111;
                padding: 30px 40px;
                height: 100%;
                box-sizing: border-box;
                display: flex;
                flex-direction: column;
                justify-content: flex-start;
                overflow-x: hidden;
                overflow-y: auto;
            }

            .settings-form {
                display: flex;
                flex-direction: column;
                gap: 12px;
                max-width: 100%;
            }

            .settings-row {
                display: flex;
                align-items: center;
                justify-content: flex-start;
                gap: 12px;
                flex-wrap: wrap;
            }

            .settings-row label {
                width: 200px;
                font-weight: 500;
                font-size: 20px;
            }

            .settings-row input[type="checkbox"] {
                transform: scale(1.1);
                margin: 0;
                margin-top: -40px;
            }

            .settings-input {
                width: 300px;
                max-width: 100%;
                padding: 6px;
                border: 1px solid #aaa;
                border-radius: 4px;
                background: #f9f9f9;
                color: #111;
                font-family: inherit;
            }

            .gm-settings {
                border-top: 1px solid #aaa;
                margin-top: 20px;
                padding-top: 10px;
            }

            .settings-button {
                width: 100px;
                margin: 20px auto 0 auto;
                padding: 8px 0;
                font-size: 15px;
                background-color: #ddd;
                border: 1px solid #888;
                border-radius: 6px;
                cursor: pointer;
                font-family: 'Crimson Pro', serif;
                color: #222;
                text-align: center;
            }

            .settings-button:hover {
                background-color: #ccc;
            }

            .settings-status {
                margin-top: 10px;
                font-style: italic;
                color: #444;
                text-align: center;
            }

            .settings-header {
                display: block;
                margin: 0 auto 25px auto;
                max-width: 100%;
            }

            #age-verification-prompt {
                margin-left: 200px;
            }

            #confirm-age-btn {
                padding: 4px 10px;
                font-size: 14px;
                cursor: pointer;
            }

            #adult_verified_icon {
                margin-left: 8px;
                font-size: 16px;
            }
        }

        /*------------------------------------------------------ Characterswitch ------------------------------------------------------*/
        @media all and (min-width: 0px) {
            #character-switcher {
                position: fixed;
                top: 0; left: 0; right: 0; bottom: 0;
                background: rgba(0,0,0,0.75);
                z-index: 8999;
                display: flex;
                align-items: center;
                justify-content: center;
            }

            .switcher-inner {
                background: #1a1a1a;
                border: 2px solid #c2a675;
                border-radius: 12px;
                padding: 20px;
                width: 80%;
                max-width: 900px;
                max-height: 350px;
                overflow-x: auto;
                position: relative;
            }

            #close-switcher {
                position: absolute;
                top: 10px;
                right: 12px;
                width:30px;
                max-width:30px;
                background: #c2a675;
                color: #000;
                border: none;
                border-radius: 4px;
                font-size: 20px;
                padding: 4px 8px;
                cursor: pointer;
            }

            .character-switcher-list {
                display: flex;
                gap: 20px;
                overflow-x: auto;
                padding: 10px 0px 10px 10px;
            }

            .character-switcher-entry {
                background: #2b2b2b;
                border: 2px solid #444;
                border-radius: 8px;
                padding: 10px;
                width: 140px;
                text-align: center;
                color: #eee;
                cursor: pointer;
                transition: transform 0.2s ease;
            }

            .character-switcher-entry:hover {
                border-color: #c2a675;
                transform: scale(1.05);
            }

            .character-switcher-entry img {
                width: 128px;
                height: 128px;
                border-radius: 6px;
                margin-bottom: 10px;
                object-fit: cover;
                background: #000;
            }
        }

        /*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
        /*++++++++++++++++++++++++++++++++++ RIGHT NAVI ++++++++++++++++++++++++++++++++++*/
        /*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/

        @media all and (min-width: 0px) {
            .bar-container {
                background: #999;
                width: 220px;
                max-width:220px;
                height: 10px;
                position: relative;
                margin-bottom: 5px;
                overflow: hidden;
                border-radius: 5px;
            }

            .bar-fill {
                background: green;
                height: 100%;
            }

            .currency-grid {
                display: grid;
                grid-template-columns: repeat(2, 1fr);
                gap: 6px 10px;
                margin-top: 10px;
            }

            .currency-entry {
                display: flex;
                align-items: center;
                gap: 6px;
                font-size: 14px;
            }

            .currency-entry img {
                width: 50px;
                height: 50px;
                object-fit: contain;
            }

            .info-values {
                width: 240px;
                flex: 0 0 240px;
                background-color: #1a1a1a;
                padding: 10px;
                overflow-y: auto;
                display: flex;
                flex-direction: column;
                align-items: flex-start;
            }
        }

        /*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
        /*++++++++++++++++++++++++++ CHARACTERSHEET POPUP LAYOUT + CHARACHTERSHEET +++++++++++++++++++++++++*/
        /*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/

        @media all and (min-width: 0px) {
            .character-header {
                font-family: 'Cinzel', serif;
                font-size: 22px;
                color: #f0e6d2;
                display: flex;
                align-items: center;
                gap: 10px;
                cursor: pointer;
                padding: 5px 10px;
                border-radius: 6px;
                background: linear-gradient(90deg, rgba(78,84,200,0.4), rgba(143,148,251,0.4));
                transition: background 0.3s ease;
            }

            .character-header:hover {
                background: linear-gradient(90deg, rgba(78,84,200,0.6), rgba(143,148,251,0.6));
            }

            #character-toggle-arrow {
                font-size: 18px;
                transition: transform 0.3s ease;
            }

            #character-toggle {
                width: 200px;
                box-sizing: border-box;
                font-family: 'Cinzel', serif;
                font-size: 22px;
                color: #f0e6d2;
                display: flex;
                align-items: center;
                justify-content: space-between;
                cursor: pointer;
                padding: 5px 10px;
                border-radius: 6px;
                background: linear-gradient(90deg, rgba(78,84,200,0.4), rgba(143,148,251,0.4));
                transition: background 0.3s ease;
            }

            #character-toggle:hover {
                background: linear-gradient(90deg, rgba(78,84,200,0.6), rgba(143,148,251,0.6));
            }

            #character-sheet-overlay.active ~ .info-values #character-toggle-arrow {
                transform: rotate(180deg);
            }

            #character-sheet-overlay {
                position: absolute;
                top: 0;
                right: 260px;
                width: 0;
                height: 100%;
                overflow-x: hidden;
                overflow-y: auto;
                box-shadow: -2px 0 10px rgba(0, 0, 0, 0.3);
                transition: width 0.4s ease;
                z-index: 1000;
            }

            #character-sheet-overlay.active {
                width: 700px;
                padding: 0;
            }

            #open-sheet-btn {
                background: linear-gradient(135deg, #4e54c8, #8f94fb);
                border: none;
                color: white;
                padding: 10px 20px;
                font-weight: bold;
                border-radius: 8px;
                cursor: pointer;
                box-shadow: 0 4px 6px rgba(0,0,0,0.2);
                transition: all 0.3s ease;
                margin-top: 10px;
            }

            #open-sheet-btn:hover {
                transform: scale(1.05);
                box-shadow: 0 6px 10px rgba(0,0,0,0.3);
            }

            .character-sheet-content {
                background-color: white;
                padding: 20px;
                border-radius: 10px;
                max-width: 600px;
                width: 90%;
                text-align: center;
            }
        }

        /*------------------------------------------------------ Charactersheet ------------------------------------------------------*/

        @media all and (min-width: 0px) {
            .char-name {
                text-align: center;
                font-size: 28px;
                margin: 0;
            }

            .char-class {
                text-align: center;
                font-size: 18px;
                color: #2c6e73;
                margin-bottom: 20px;
                border-bottom: 1px solid #aaa;
                padding-bottom: 5px;
            }

            .char-bars .bar-container {
                margin: 5px 0;
            }

            .char-death {
                display: flex;
                align-items: center;
                margin-top: 10px;
            }

            .icon-skull {
                width: 24px;
                height: 24px;
                margin-right: 8px;
            }

            .icon-heart {
                width: 100px;
                height: 100px;
                margin-right: 8px;
                border-radius: 50%;
                object-fit: cover;
            }

            .char-worlds {
                display: flex;
                gap: 10px;
                margin-top: 15px;
            }

            .char-worlds img {
                width: 100px;
                height: 100px;
                border-radius: 8px;
                object-fit: cover;
                border: 2px solid #999;
            }

            .character-sheet.parchment-theme {
                font-family: 'Crimson Pro', serif;
                background-image: url('../../source/ui/parchment_texture2.jpg');
                background-size: cover;
                background-position: center;
                padding: 40px;
                border-radius: 16px;
                box-shadow: 0 0 40px rgba(0, 0, 0, 0.6);
                color: #3a2f20;
                max-height: none;
                overflow: visible;
            }

            .character-sheet h1.char-name {
                font-family: 'Cinzel', serif;
                font-size: 32px;
                text-align: center;
                margin-bottom: 5px;
                letter-spacing: 1px;
                color: #4b3a18;
            }

            .character-sheet .char-class {
                font-family: 'Crimson Pro', serif;
                text-align: center;
                font-size: 18px;
                font-weight: bold;
                color:rgb(59, 42, 25);
                margin-bottom: 25px;
                border-bottom: 1px solid #a48c5b;
                padding-bottom: 5px;
            }

            .sheet-section {
                border: 3px solid #c2a868;
                border-radius: 10px;
                padding: 15px;
                margin-bottom: 20px;
                background: rgba(255, 255, 240, 0.85);
                box-shadow: inset 0 0 10px rgba(0,0,0,0.1);
            }
        }

        /*------------------------------------------------------ Attribut-Block ------------------------------------------------------*/
        
        @media all and (min-width: 0px) {
            #char-attributes {
                display: grid;
                grid-template-columns: repeat(3, 1fr);
                gap: 12px;
                text-align: center;
            }

            #char-attributes div {
                font-weight: bold;
                font-size: 14px;
                background-color: rgba(255, 255, 255, 0.6);
                border: 1px solid #a48c5b;
                border-radius: 6px;
                padding: 6px;
            }

            #char-attributes_secondary {
                display: grid;
                grid-template-columns: repeat(3, 1fr);
                gap: 12px;
                text-align: center;
            }

            #char-attributes_secondary div {
                font-weight: bold;
                font-size: 14px;
                background-color: rgba(255, 255, 255, 0.6);
                border: 1px solid #a48c5b;
                border-radius: 6px;
                padding: 6px;
            }
        }

        /*------------------------------------------------------ Death Counter, Love, PAtron & Hate Value ------------------------------------------------------*/
        
        @media all and (min-width: 0px) {
            #char-death {
                display: flex;
                align-items: center;
                font-weight: bold;
                font-size: 16px;
            }

            #char-death::before {
                content: '☠️';
                font-size: 20px;
                margin-right: 10px;
            }

            #love-value {
                font-size: 16px;
                color: #b04c4c;
                font-weight: bold;
            }

            #patron-value {
                font-size: 16px;
                color: #b04c4c;
                font-weight: bold;
            }

            #char-love {
                display: flex;
                justify-content: space-around;
                align-items: flex-start;
                flex-wrap: wrap;
                gap: 20px;
                text-align: center;
            }

            .love-block,
            .patron-block,
            .hate-block {
                display: flex;
                flex-direction: column;
                align-items: center;
                gap: 10px;
                padding: 10px;
                background: rgba(255,255,255,0.6);
                border-radius: 10px;
                box-shadow: inset 0 0 6px rgba(0,0,0,0.1);
                min-width: 120px;
                max-width: 150px;
            }

            #love-npc-image,
            #patron-npc-image,
            #hate-npc-image {
                width: 100px;
                height: 100px;
                border-radius: 50%;
                object-fit: cover;
                border: 2px solid #999;
            }

            #love-value,
            #patron-value,
            #hate-value {
                font-size: 14px;
                font-weight: bold;
                color: #222;
            }
        }

        /*------------------------------------------------------ World-Tiles ------------------------------------------------------*/
        
        @media all and (min-width: 0px) {
            .world-section {
                display: flex;
                flex-wrap: wrap;
                gap: 10px;
            }

            .world-section img {
                width: 100px;
                height: 100px;
                border-radius: 8px;
                object-fit: cover;
                border: 2px solid #8d7347;
                box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
            }

            .bar-row {
                display: flex;
                flex-direction: row;
                align-items: flex-start;
                gap: 20px;
                justify-content: space-between;
            }

            .bar-left {
                flex: 1;
                max-width: 50%;
            }

            .bar-right {
                flex: 1;
                max-width: 50%;
                display: flex;
                flex-direction: column;
                gap: 8px;
                justify-content: flex-start;
                align-items: flex-start;
            }
        }

        /*------------------------------------------------------ SKILLS ------------------------------------------------------*/
        
        @media all and (min-width: 0px) {
            #char-skills {
                display: flex;
                flex-wrap: wrap;
                gap: 10px;
                justify-content: flex-start;
            }

            .skill-icon {
                width: 48px;
                height: 48px;
                border-radius: 6px;
                object-fit: cover;
                position: relative;
                cursor: pointer;
            }

            .skill-icon:hover::after {
                content: attr(data-tooltip);
                position: absolute;
                bottom: -35px;
                left: 0;
                background: rgba(0,0,0,0.8);
                color: white;
                font-size: 12px;
                padding: 6px;
                border-radius: 4px;
                white-space: pre-line;
                z-index: 10;
                width: 200px;
            }
        }

        /*------------------------------------------------------ SKILL POPUP ------------------------------------------------------*/
        
        @media all and (min-width: 0px) {
            .skill-popup {
                position: absolute;
                top: 50px;
                right: 940px;
                width: 300px;
                background-image: url('../../source/ui/background_skillinfo.jpg');
                background-size: cover;
                background-position: center;
                border: 2px solid #aa9966;
                border-radius: 8px;
                box-shadow: 0 0 10px rgba(0,0,0,0.3);
                font-family: 'Crimson Pro', serif;
                color: #000000;
                padding: 15px;
                z-index: 2000;
            }

            .skill-popup-content {
                position: relative;
            }

            .skill-popup-content img {
                width: 256px;
                height: 256px;
                object-fit: contain;
                display: block;
                margin: 0 auto 10px auto;
                border-radius: 12px;
                box-shadow: 0 0 8px rgba(0,0,0,0.3);
            }

            #skill-popup-close {
                padding: 4px 10px;
                font-size: 14px;
                background-color: #c9b693;
                border: none;
                border-radius: 5px;
                cursor: pointer;
            }

            .skill-tooltip {
                position: absolute;
                background: #f0e6d6;
                color: #222;
                border: 1px solid #aa9966;
                padding: 8px;
                border-radius: 6px;
                font-size: 12px;
                max-width: 220px;
                z-index: 2000;
                box-shadow: 0 2px 8px rgba(0,0,0,0.3);
                display: none;
                pointer-events: auto;
            }
        }

        /*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
        /*++++++++++++++++++++++++++ QUESTS, EXPLORATION & PLOTSTUFF +++++++++++++++++++++++++*/
        /*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/

        /*------------------------------------------------------ Randomexploration ------------------------------------------------------*/

        @media all and (min-width: 0px) {
            #popup-overlay-exploration {
                position: fixed;
                top: 0;
                left: 0;
                width: 100vw;
                height: 100vh;
                background: rgba(10, 10, 10, 0.9);
                z-index: 8999;
                display: none;
                overflow: auto;
                padding: 20px;
                max-height: 100vh;
            }

            #popup-overlay-exploration > button {
                width: 50px;
                height: 50px;
                background: #222;
                color: #fff;
                border: 2px solid #a28c60;
                border-radius: 8px;
                cursor: pointer;
            }

            #exploration-setup {
                max-width: 600px;
                margin: 0 auto 30px auto;
                padding: 20px;
                background: #111;
                border: 2px solid #a28c60;
                border-radius: 10px;
                color: #fff;
                display: block;
            }

            .exploration-overlay {
                position: fixed;
                top: 0;
                left: 0;
                width: 100vw;
                height: 100vh;
                background: rgba(10, 10, 10, 0.9);
                z-index: 8999;
                display: none;
                overflow: auto;
                padding: 20px;
            }

            #exploration-wrapper {
                position: relative;
                width: 1000px;
                height: 800px;
                overflow: hidden;
                margin: 0 auto;
            }

            #exploration-bg {
                position: absolute;
                top: 0;
                left: 0;
                width: 1000px;
                height: 800px;
                object-fit: cover;
                z-index: 0;
            }

            #exploration-scroll-container {
                position: absolute;
                top: 0;
                left: 0;
                width: 1000px;
                height: 800px;
                overflow-y: auto;
                overflow-x: hidden;
                z-index: 1;
            }

            #exploration-canvas {
                display: block;
                width: 1000px;
                z-index: 10001;
                pointer-events: auto;
            }

            .node-popup-overlay {
                position: fixed;
                top: 0; left: 0;
                width: 100vw;
                height: 100vh;
                background: rgba(0,0,0,0.8);
                z-index: 10002;
                display: flex;
                align-items: center;
                vertical-align: top;
                justify-content: center;
            }

            .node-popup-content {
                position: relative;
                width: 800px;
                height: 800px;
                max-width: 90%;
                max-height: 90%;
                min-width: 300px;
                min-height: 200px;
                display: flex;
                flex-direction: column;
                justify-content: flex-end;
                border: 3px solid #a28c60;
                border-radius: 12px;
                overflow: hidden;
                box-shadow: 0 0 25px #000;
            }

            .node-popup-image {
                position: absolute;
                width: 100%;
                height: 100%;
                object-fit: cover;
                z-index: 0;
            }

            .node-popup-close {
                position: absolute;
                top: 8px;
                right: 16px;
                font-size: 32px;
                color: white;
                cursor: pointer;
                z-index: 1;
                text-shadow: 0 0 5px #000;
            }

            .node-popup-overlay-text {
                position: absolute;
                bottom: 20px;
                left: 20px;
                right: 20px;
                color: white;
                font-size: 18px;
                text-shadow: 0 0 8px #000;
                font-family: 'Crimson Pro', serif;
                z-index: 1;
                background: rgba(0,0,0,0.5);
                padding: 20px;
                border-radius: 8px;
            }

            .node-popup-content.fullscreen-fight {
                width: 100vw;
                height: 100vh;
                max-width: 100%;
                max-height: 100%;
                border-radius: 0;
                justify-content: center;
            }

            .node-popup-content.fullscreen-fight .node-popup-image {
                object-fit: contain;
                background-color: black;
            }
        }

        /*------------------------------------------------------ Planned Dungeons + Editor ------------------------------------------------------*/

        @media all and (min-width: 0px) {
            .admin-dungeon-editor {
                display:none;
                position:fixed;
                top:50px;
                left:50%;
                transform:translateX(-50%);
                width:90%;
                max-width:1000px;
                max-height:85vh;
                overflow:auto;
                z-index:12000;
                padding:20px;
                border:2px solid #ccc;
                background:#1e1e1e;
                color:white;
                border-radius:10px;
                box-shadow:0 0 20px rgba(0,0,0,0.7);
            }

            .dungeon-canvas-wrapper {
                max-height: 600px; /* oder mehr je nach Layout */
                overflow-y: auto;
                border: 1px solid #555;
                background: #111;
            }

            .dungeon-canvas {
                border:1px solid #888; 
                background:#111; 
                margin-bottom:10px;
                display: block;
            }

            .dungeon-json {
                width:100%;
                height:200px;
                margin-top:10px;
                font-family:monospace;
            }

            .dungeon-editor-controls {
                display: flex;
                flex-wrap: wrap;
                gap: 20px;
                margin-bottom: 10px;
            }

            .dungeon-buttons {
                flex: 1 1 30%;
                display: flex;
                flex-direction: column;
                gap: 5px;
            }

            .dungeon-buttons button {
                width: 100%;
                font-size: 14px;
                padding: 6px;
                background-color: #b89c6e;
                border: none;
                border-radius: 6px;
                color: #111;
                font-weight: bold;
                cursor: pointer;
            }

            .dungeon-inputs {
                flex: 1 1 65%;
                display: flex;
                flex-direction: column;
                justify-content: flex-start;
            }

            .node-edit-panel {
                display:none;
                margin-top:10px;
                background:#2a2a2a;
                padding:10px;
                border-radius:6px;
            }

            #dungeon-input-form {
                background: #2a2a2a;
                padding: 10px;
                border-radius: 6px;
                font-weight:bold;
                color: white;
            }

            #gm-dungeon-toggle {
                position: fixed;
                bottom: 10px;
                left: 10px;
                font-size: 22px;
                cursor: pointer;
                z-index: 2000;
                padding: 5px 8px;
                border-radius: 6px;
                box-shadow: 0 0 5px rgba(0,0,0,0.2);
            }

            #gm-dungeon-close {
                position: absolute;
                top: 10px;
                right: 10px;
                font-size: 20px;
                cursor: pointer;
                padding: 2px 6px;
                border-radius: 5px;
            }
        }

        @media all and (min-width: 0px) {
            #gm-marker-toggle {
                position: fixed;
                bottom: 100px;
                left: 10px;
                font-size: 22px;
                cursor: pointer;
                z-index: 2000;
                padding: 5px 8px;
                border-radius: 6px;
                box-shadow: 0 0 5px rgba(0,0,0,0.2);
            }

            #gm-marker-close {
                position: absolute;
                top: 10px;
                right: 10px;
                font-size: 20px;
                cursor: pointer;
                padding: 2px 6px;
                border-radius: 5px;
            }
        }

        @media all and (min-width: 0px) {
            #gm-quest-toggle {
                position: fixed;
                bottom: 40px;
                left: 10px;
                font-size: 22px;
                cursor: pointer;
                z-index: 2000;
                padding: 5px 8px;
                border-radius: 6px;
                box-shadow: 0 0 5px rgba(0,0,0,0.2);
            }

            #gm-quest-close {
                position: absolute;
                top: 10px;
                right: 10px;
                font-size: 20px;
                cursor: pointer;
                padding: 2px 6px;
                border-radius: 5px;
            }
        }

        @media all and (min-width: 0px) {
            #gm-dialog-toggle {
                position: fixed;
                bottom: 70px;
                left: 10px;
                font-size: 22px;
                cursor: pointer;
                z-index: 2000;
                padding: 5px 8px;
                border-radius: 6px;
                box-shadow: 0 0 5px rgba(0,0,0,0.2);
            }

            #gm-dialog-close {
                position: absolute;
                top: 10px;
                right: 10px;
                font-size: 20px;
                cursor: pointer;
                padding: 2px 6px;
                border-radius: 5px;
            }
        }

        /*+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
        /*++++++++++++++++++++++++++ BATTLE, MINIGAMES & OTHER EVENTS +++++++++++++++++++++++++*/
        /*+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/

        /*------------------------------------------------------ Loot-Event ------------------------------------------------------*/

        @media all and (min-width: 0px) {
            .loot-tile {
                position: relative;
                width: 100px;
                background: #111;
                padding: 6px;
                text-align: center;
                border: 1px solid #555;
                color: white;
                font-size: 12px;
                border-radius: 6px;
            }

            .loot-icon {
                width: 48px;
                height: 48px;
                margin-bottom: 4px;
            }

            .loot-name {
                font-weight: bold;
                margin-bottom: 4px;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
            }

            .button-row {
                display: flex;
                justify-content: center;
                gap: 4px;
                margin-top: 6px;
            }

            .tooltip-button {
                width: 28px;
                height: 28px;
                cursor: pointer;
                filter: drop-shadow(0 0 2px black);
            }

            .tooltip {
                display: none;
                position: absolute;
                bottom: 100%;
                left: 50%;
                transform: translateX(-50%);
                background: rgba(30, 30, 30, 0.95);
                color: #fff;
                padding: 6px 8px;
                border-radius: 4px;
                border: 1px solid #999;
                font-size: 11px;
                z-index: 100;
                width: max-content;
                max-width: 200px;
                box-shadow: 0 0 4px rgba(0,0,0,0.5);
                white-space: normal;
            }

            .loot-tile:hover .tooltip {
                display: block;
            }
        }

        /*------------------------------------------------------ Combat-Event General ------------------------------------------------------*/

        @media all and (min-width: 0px) {
            #battle-canvas-container {
                position: fixed;
                top: 0;
                left: 0;
                width: 100vw;
                height: 100vh;
                z-index: 2;
                pointer-events: none;
            }

            #battle-canvas {
                width: 100vw;
                height: 100vh;
                display: block;
                background: transparent;
                pointer-events: none;
            }

            #enemy-status {
                position: absolute;
                top: 20px;
                left: 20px;
                color: white;
                z-index: 5;
            }

            #combat-inspect {
                position: absolute;
                top: 20px;
                right: 20px;
                background: #222;
                padding: 12px;
                color: #fff;
                border-radius: 6px;
                border: 1px solid #555;
                z-index: 6;
            }
        }

        /*------------------------------------------------------ Combat-Event Combatmenu ------------------------------------------------------*/

        @media all and (min-width: 0px) {
            #combat-menu {
                position: absolute;
                bottom: 30px;
                left: 30px;
                z-index: 1000;
                font-family: 'Crimson Pro', serif;
                background: #fdf4e2;
                border: 2px solid #a17b4e;
                border-radius: 12px;
                box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.25);
                padding: 6px 0;
                width: 180px;
            }

            .combat-actions {
                list-style: none;
                margin: 0;
                padding: 0;
            }

            .action-button {
                padding: 10px 16px;
                cursor: pointer;
                border-bottom: 1px solid #d3b38a;
                background: transparent;
                color: #432e1f;
                font-weight: bold;
                transition: background 0.2s, color 0.2s;
                display: block;
            }

            .action-button.has-submenu {
                position: relative;
            }

            .action-button:hover {
                background: #f7e7c9;
                background-color: rgba(0, 0, 0, 0.05);
                color: #000;
            }

            .action-button:last-child {
                border-bottom: none;
            }

            .has-submenu::after {
                content: "▶";
                float: right;
                font-size: 12px;
                margin-top: 3px;
            }

            .submenu {
                display: none;
                position: absolute;
                left: 190px;
                top: 0;
                background: #fff8e6;
                border: 2px solid #c7a679;
                border-radius: 6px;
                padding: 6px;
                padding-bottom: 100px;
                max-height: 250px;
                overflow-y: auto;
                z-index: 9999;
                width: 270px;
                box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.2);
            }

            .submenu.scrollable {
                max-height: 200px;
                overflow-y: auto;
                padding-right: 15px;
                padding-bottom: 50px;
            }

            .submenu.scrollable::-webkit-scrollbar {
                width: 6px;
            }

            .submenu.scrollable::-webkit-scrollbar-thumb {
                background-color: #c0a060;
                border-radius: 4px;
            }

            .submenu li {
                display: grid;
                gap: 0.5em;
                color: #432e1f;
                align-items: start;
                padding: 4px 8px;
                font-size: 0.9em;
                line-height: 1.4;
                grid-template-columns: 40px auto;
                grid-template-rows: auto auto;
                column-gap: 10px;
                padding: 8px;
                border-bottom: 1px solid #ddd;
            }

            .submenu li img {
                grid-row: span 2;
                width: 32px;
                height: 32px;
                object-fit: contain;
            }

            .submenu li strong {
                font-weight: bold;
                margin-bottom: 4px;
            }

            .submenu li .description {
                grid-column: 1 / -1;
                font-size: 0.9em;
                margin-top: 4px;
                color: #333;
            }

            .submenu li:hover {
                background: #f3e4c6;
            }

            .submenu li:last-child {
                border-bottom: none;
            }

            .skill-status {
                font-size: 0.8em;
                margin-left: 6px;
                vertical-align: middle;
            }

            .skill-status.cooldown {
                color: #a00; /* Dunkelrot für Cooldown */
            }

            .skill-status.mana {
                color: #00a; /* Blau für Mana */
            }

            .skill-status.stunned {
                color: #a06; /* Violett für Betäubung */
            }

            .disabled-skill {
                opacity: 0.8;
                pointer-events: none;
            }

            .skill-overlay {
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                background: rgba(255, 255, 255, 0.8);
                display: flex;
                justify-content: center;
                align-items: center;
                font-size: 1.1em;
                font-weight: bold;
                color: #432e1f;
                border-radius: 4px;
                text-align: center;
                pointer-events: none;
                z-index: 10;
                padding: 8px;
                line-height: 1.2;
            }

            .skill-overlay span {
                margin-top: 2px;
            }
        }

        /*------------------------------------------------------ Combat-Event Characterimage / Enemy Image ------------------------------------------------------*/

        @media all and (min-width: 0px) {
            #character-stack {
                position: fixed;
                right: 750px;
                bottom: 50px;
                transform: translateY(-337px);
                z-index: 15;
                pointer-events: none;
            }

            #character-stack img.layer {
                position: absolute;
                width:300px;
                /*width: 200px;*/
                height: 337px;
                /*height: auto;*/
                display: block;
                visibility: visible;
            }

            #enemy-sprite-container {
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                z-index: 10;
                pointer-events: none;
            }

            #companion-pet-sprite-container,
            #companion-patron-sprite-container {
                position: fixed;
                bottom: 50px;
                transform: translateY(-337px); 
                z-index: 16; 
                pointer-events: none;
            }

            #companion-pet-sprite-container img,
            #companion-patron-sprite-container img {
                position: absolute;
                height: 337px;
                width: auto;
                display: block;
                visibility: visible;
            }

            #companion-pet-sprite-container {
                right: 980px; 
            }

            #companion-patron-sprite-container {
                right: 520px; /* etwas mehr nach rechts */
            }

            .scale-x1  { transform: scale(1); }
            .scale-x08 { transform: scale(0.8); }
            .scale-x12 { transform: scale(1.2); }
        }

        /*------------------------------------------------------ Combat-Event HP & Statanzeigen ------------------------------------------------------*/

        @media all and (min-width: 0px) {
            #combat-ui {
                position: absolute;
                top: 10px;
                right: 10px;
                width: 200px;
                background: rgba(0, 0, 0, 0.4);
                color: #fff;
                padding: 10px;
                border-radius: 8px;
                font-family: "Crimson Pro", serif;
            }

            #enemy-hp-bar, #char-hp-bar, #char-mana-bar {
                width: 100%;
                height: 10px;
                background: #222;
                margin-bottom: 5px;
                border: 1px solid #444;
                border-radius: 4px;
            }

            .status-box {
                background: rgba(0, 0, 0, 0.5);
                color: #f0e5cf;
                padding: 12px;
                border-radius: 10px;
                font-family: "Crimson Pro", serif;
                font-size: 24px;
                width: 250px;
                max-width: 250px;
            }

            .status-box.enemy {
                position: absolute;
                top: 30px;
                left: 30px;
                z-index: 10;
            }

            .status-box.character {
                position: absolute;
                top: 30px;
                right: 30px;
                z-index: 10;
            }

            .status-box .name {
                font-size: 28px;
                font-weight: bold;
                margin-bottom: 6px;
            }

            .bar-container-combat {
                margin-bottom: 6px;
            }

            .bar-container-combat .label {
                font-size: 24px;
                color: #ccc;
                margin-bottom: 2px;
            }

            .bar {
                position: relative;
                width: 180px;
                height: 12px;
                background-color: #444;
                border-radius: 6px;
                overflow: hidden;
                margin-bottom: 3px;
            }

            .bar .fill {
                height: 100%;
                width: 0%;
                background: linear-gradient(to right, #75c9ff, #3785c0);
                border-radius: 6px;
                transition: width 0.2s ease-in-out;
            }

            .bar.hp .fill {
                background: linear-gradient(to right, #ff6e6e, #b80000);
            }

            .value {
                font-size: 24px;
                color: #eee;
            }

            .character-hpmana-text { font-size: 15px; margin-top: 6px; opacity: .95; color: #eee; }

            .buff-list {
                display: flex;
                flex-wrap: wrap;
                gap: 4px;
                align-items: center;
                margin-top: 4px;
                margin-bottom: 10px;
            }

            .buff-list img {
                width: 44px !important;
                height: 44px !important;
                border: none;
                outline: none;
                box-shadow: none;
                background: none;
                image-rendering: auto;
                cursor: help;
                pointer-events: auto !important;
            }

            .buff-list img:hover { 
                transform: scale(1.1); 
                filter: drop-shadow(0 0 3px rgba(255,255,255,0.35)); 
                transition: transform .08s; 
                cursor: help;
                pointer-events: auto;
            }

            .combat-message-box {
                position: fixed;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
                background: rgba(0,0,0,0.8);
                color: white;
                padding: 20px 30px;
                font-size: 20px;
                border-radius: 10px;
                z-index: 9999;
            }

            .status-box.character {
                font-size: 18px !important;
            }

            .status-box .name {
                font-size: 22px !important;
            }

            #char-tooltip-icon {
                margin-left: 8px;
                font-size: 18px;
                cursor: help;
                color: #ffcc80;
                vertical-align: middle;
                pointer-events: auto;
            }

            #victory-popup::-webkit-scrollbar {
                width: 8px;
            }
            #victory-popup::-webkit-scrollbar-thumb {
                background: #c0a060;
                border-radius: 4px;
            }

            #environment-effect-bar {
                position: absolute;
                top: 20px;
                left: 50%;
                transform: translateX(-50%);
                display: flex;
                gap: 8px;
                z-index: 10;
            }

            .buffbar.environment-bar .buff-icon {
                width: 88px;
                height: 88px;
                border: 2px solid #999;
                background-color: rgba(255,255,255,0.1);
                border-radius: 8px;
                overflow: visible;  /* Wichtig für Tooltip! */
                position: relative;
            }

            .buff-tooltip {
                position: absolute;
                top: 100%;
                left: 50%;
                transform: translateX(-50%);
                background-color: rgba(0, 0, 0, 0.85);
                color: #fff;
                padding: 6px 10px;
                border-radius: 6px;
                font-size: 12px;
                white-space: pre-line;
                max-width: 200px;
                z-index: 999999;
                pointer-events: none;
                opacity: 0;
                visibility: hidden;
                transition: opacity 0.2s ease, visibility 0.2s ease;
            }

            .buff-icon:hover .buff-tooltip {
                opacity: 1;
                visibility: visible;
            }

            .small-text { font-size: 12px; opacity:.9; margin-top:4px; }

            /* ==================== ALLY-LIST ==================== */
            #ally-list { padding: 6px 0; }

            .ally-card {
                margin-bottom: 12px;
                padding: 10px 12px;
                border-radius: 12px;
                background: rgba(0, 40, 0, 0.22);
                pointer-events: auto;
            }

            .ally-name-row {
                display: flex;
                justify-content: space-between;
                align-items: center;
                margin-bottom: 8px;
            }

            .ally-name {
                font-weight: 700;
                font-size: 20px;
                margin-right: 8px;
                margin-bottom: 6px;
            }

            #ally-list .buff-row {
                margin-top: 8px;
                display: flex;
                gap: 8px;
                flex-wrap: wrap;
            }

            #ally-list .buff-icon-ally {
                width: 44px !important;
                height: 44px !important;
                image-rendering: auto;
                cursor: help;
                pointer-events: auto;
            }

            #ally-list .buff-icon-ally:hover {
                transform: scale(1.1);
                filter: drop-shadow(0 0 3px rgba(255,255,255,0.35));
                transition: transform .08s;
                cursor: help;
                pointer-events: auto;
            }

            /* Gegnerliste – bessere Lesbarkeit */
            #enemy-list { padding: 6px 0; }
            .enemy-card { margin-bottom: 12px; padding: 10px 12px; border-radius: 12px; background: rgba(0,0,0,0.22); pointer-events: auto; }
            .enemy-card.active { outline: 2px solid #e0b060; background: rgba(224,176,96,0.10); }
            .enemy-name { font-weight: 800; font-size: 22px; margin-bottom: 8px; }
            .hp-bar { height: 14px; background:#2e2e2e; border-radius:9px; overflow:hidden; }
            .hp-fill { height:100%; background:#c44; }
            .enemy-hp-text { font-size: 15px; margin-top: 6px; opacity: .95; }
            .enemy-card.dead { opacity: 0.4; filter: grayscale(100%); pointer-events: none; }

            #enemy-list .buff-row { 
                margin-top: 8px; 
                display:flex; 
                gap:8px; 
                flex-wrap:wrap; 
            }
            #enemy-list .buff-icon-enemy {
                width: 44px !important;
                height: 44px !important;
                image-rendering: auto;
                cursor: help;
                pointer-events: auto;
            }

            #enemy-list .buff-icon-enemy:hover { 
                transform: scale(1.1); 
                filter: drop-shadow(0 0 3px rgba(255,255,255,0.35)); 
                transition: transform .08s; 
                cursor: help;
                pointer-events: auto;
            }

            /* Tooltip */
            #ui-tooltip-enemy {
                position: absolute;
                z-index: 999999;
                display: none;
                max-width: 320px;
                padding: 8px 10px;
                background: rgba(20,20,20,0.95);
                color: #eee;
                border: 1px solid rgba(255,255,255,0.2);
                border-radius: 8px;
                font-size: 13px;
                line-height: 1.3;
                white-space: pre-line; /* \n als Zeilenumbruch */
                pointer-events: none;
                box-shadow: 0 4px 12px rgba(0,0,0,0.35);
            }

            .turn-overlay {
                position: absolute;
                bottom: 10px;
                right: 10px;
                background-color: rgba(20, 20, 20, 0.8);
                border: 1px solid #999;
                padding: 8px;
                border-radius: 6px;
                max-width: 300px;
                font-size: 14px;
                color: white;
                z-index: 999;
            }

            .turn-entry {
                display: flex;
                justify-content: space-between;
                padding: 2px 4px;
                margin: 2px 0;
                border-bottom: 1px solid #333;
            }

            .turn-entry.dead {
                text-decoration: line-through;
                opacity: 0.5;
            }

            .turn-entry.active {
                font-weight: bold;
                color: #ffd700;
            }

            .ally-name-row {
                display: flex;
                justify-content: space-between;
                align-items: center;
            }

            .ally-patron-modes {
                display: flex;
                gap: 2px;
            }

            .ally-mode-btn {
                font-size: 10px;
                padding: 1px 5px;
                border: none;
                border-radius: 4px;
                background-color: #333;
                color: #ccc;
                cursor: pointer;
                pointer-events: auto;
            }

            .ally-mode-btn:hover {
                background-color: #444;
            }

            .ally-mode-btn.active {
                background-color: #c0a060;
                color: black;
            }

            .ally-bar-text {
                font-size: 16px;
                text-align: left;
                margin-bottom: 2px;
            }
        }

        /*------------------------------------------------------ Skill-Tree ------------------------------------------------------*/

        @media all and (min-width: 0px) {
            .skilltree-section {
                width: fit-content;
                max-width: 100%;
                margin: 40px auto;
                padding: 20px;
                background: rgba(245, 233, 208, 0.9);
                border: 3px double #7c5e45;
                border-radius: 12px;
                box-shadow: 0 0 8px rgba(0,0,0,0.3);
                position: relative;
            }

            .skilltree-header {
                font-family: 'Cinzel', serif;
                font-size: 22px;
                font-weight: bold;
                text-align: center;
                margin-bottom: 20px;
                color: #3b2f26;
                border-bottom: 2px solid #b7a88e;
                padding-bottom: 5px;
            }

            .skilltree-grid {
                display: grid;
                grid-template-columns: repeat(5, 120px);  /* Max 5 Skills pro Zeile */
                gap: 10px;
                padding: 20px;
                justify-content: center;
                align-items: start;
            }

            .skill-node {
                grid-column-start: var(--x);
                grid-row-start: var(--y);
                position: relative;
                width: 120px;
                height: 120px;
                text-align: center;
                border: 2px solid #aaa;
                background-color: rgba(255, 255, 255, 0.8);
                border-radius: 8px;
            }

            .skill-node:hover {
                transform: scale(1.05);
                z-index: 10;
            }

            /* === Skill Icon === */
            .skill-icon {
                width: 64px;
                height: 64px;
                object-fit: contain;
                margin-bottom: 6px;
                padding-top: 5px;
            }

            /* === Label unterhalb des Icons === */
            .skill-label {
                font-size: 13px;
                font-family: 'Crimson Pro', serif;
                color: #2a1e12;
            }

            /* === Statusfarben === */
            .state-owned {
                border-color: #66cc77;
                background: #e8fbe9;
            }
            .state-eligible {
                border-color: #66aaff;
                background: #eaf3ff;
                cursor: pointer;
            }
            .state-locked {
                opacity: 0.5;
                filter: grayscale(1);
                background: #f0f0f0;
            }

            /* === Tooltip === */
            .skill-tooltip {
                position: absolute;
                top: -10px;
                left: 110%;
                width: 220px;
                padding: 10px;
                background: #fffdf7;
                border: 1px solid #aaa;
                box-shadow: 2px 2px 5px rgba(0,0,0,0.2);
                font-size: 13px;
                font-family: 'Crimson Pro', serif;
                color: #1d1b16;
                text-align: left;
                pointer-events: none;
                opacity: 0;
                transition: opacity 0.3s ease;
                z-index: 50;
            }

            .skill-node:hover .skill-tooltip {
                opacity: 1;
            }

            /* === Klickbar-Style (optional hervorheben) === */
            .clickable {
                outline: 2px solid #336699;
                outline-offset: -6px;
            }

            /* === Verbindung zwischen Trees (Trennlinie) === */
            .skilltree-section:not(:first-child)::before {
                content: \"\";
                display: block;
                height: 30px;
                width: 100%;
                border-top: 4px solid #96784f;
                margin: 30px 0;
            }

            #gm-skilltree-toggle {
                position: fixed;
                bottom: 160px;
                left: 10px;
                font-size: 22px;
                cursor: pointer;
                z-index: 2000;
                /*background: rgba(255, 255, 255, 0.9);*/
                padding: 5px 8px;
                border-radius: 6px;
                box-shadow: 0 0 5px rgba(0,0,0,0.2);
            }

            #gm-skilltree-close {
                position: absolute;
                top: 10px;
                right: 10px;
                font-size: 20px;
                cursor: pointer;
                padding: 2px 6px;
                border-radius: 5px;
                z-index: 10001;
                pointer-events: auto;
            }

            #admin-skilltree-editor {
                width: 800px;
                max-width: 80%;
                margin: 0px auto;
                position: fixed;
                top: 0px;
                left: 0;
                right: 0;
                z-index: 2000;
                background-color: #111;
                color: white;
                border-radius: 10px;
                box-shadow: 0 0 15px rgba(0, 0, 0, 0.5);
                padding: 20px;
                display: none;
                overflow-y: auto;
                max-height: calc(100vh - 100px);
            }

            .buy-skill-button {
                margin-top: 6px;
                padding: 4px 8px;
                font-size: 12px;
                border: none;
                border-radius: 4px;
                background-color: #b89c6e;
                color: white;
                cursor: pointer;
            }

            .state-owned {
                background-color: #d9ffd9;
                border-color: #56a356;
            }
            .state-eligible {
                border-color: #77c;
            }
            .state-locked {
                filter: grayscale(100%);
                opacity: 0.5;
            }

            .skilltree-connections {
                position: absolute;
                top: 0; left: 0;
                width: 100%; height: 100%;
                pointer-events: none;
                z-index: 1;
            }

            .skill-connection-line {
                stroke-width: 4;
                stroke-linecap: round;
                opacity: 0.8;
            }

            /* 🎨 Beispiel-Stile */
            .line-warrior .skill-connection-line {
                stroke: #b02d2d;
            }
            .line-explorer .skill-connection-line {
                stroke: #32754d;
            }
            .line-combined .skill-connection-line {
                stroke: #6d4c41;
            }

            /* ✨ Alternativ: Mit Image-Pattern (wenn du willst) */
            .line-warrior .skill-connection-line {
                stroke: url(#pattern-sword);
            }
        }