/* Divergence Welt — Deine innere Welt  v1.5.0 */

/* ── Container & Aspect-Ratio ─────────────────────────────────────────────── */
.dw-world-container {
    position: relative !important;
    width: 100% !important;
    max-width: 2752px !important;
    aspect-ratio: 2752 / 1536 !important;
    overflow: hidden !important; /* LÖSUNG: Hält den Zoom im Kasten! */
    box-sizing: border-box !important;
    /* Performance: eigene Compositing-Ebene, enthält blend-modes */
    isolation: isolate;
    contain: layout paint;
}

/* ── SVG: nimmt den vollen Container ein ─────────────────────────────────── */
.dw-world-svg {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    cursor: grab;
    transform-origin: 0 0;
}
.dw-world-svg:active {
    cursor: grabbing;
}

/* ── Region-Interaktion ───────────────────────────────────────────────────── */
.dw-region {
    cursor: pointer;
    transition: fill-opacity 0.25s ease;
}
.dw-region:hover {
    filter: brightness(1.25) saturate(1.15);
}

/* ── Hover-Tooltip ────────────────────────────────────────────────────────── */
.dw-tooltip {
    position: fixed !important;
    z-index: 99999 !important;
    pointer-events: none !important;
    background: rgba(12, 8, 24, 0.90) !important;
    border: 1px solid rgba(196, 180, 150, 0.55) !important;
    border-radius: 8px !important;
    padding: 9px 14px !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(196, 180, 150, 0.15) !important;
    backdrop-filter: blur(6px) !important;
    opacity: 0 !important;
    transform: translateY(6px) !important;
    transition: opacity 0.18s ease, transform 0.18s ease !important;
    min-width: 130px !important;
    max-width: 220px !important;
    font-family: system-ui, sans-serif !important;
    line-height: 1.5 !important;
}
.dw-tooltip--visible {
    opacity: 1 !important;
    transform: translateY(0) !important;
}
.dw-tooltip__label {
    display: block !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    color: #e8dcc8 !important;
    margin-bottom: 3px !important;
    font-family: 'Cormorant Garamond', Georgia, serif !important;
}
.dw-tooltip__dim {
    display: block !important;
    font-size: 10px !important;
    letter-spacing: 1.5px !important;
    text-transform: uppercase !important;
    color: #c4975a !important;
    font-family: monospace !important;
    margin-bottom: 4px !important;
}
.dw-tooltip__value {
    display: block !important;
    font-size: 12px !important;
    color: #b0a8e0 !important;
    font-family: monospace !important;
}
.dw-tooltip__unassigned {
    display: block !important;
    font-size: 11px !important;
    color: #6a5a8a !important;
    font-style: italic !important;
}

/* ── Demo-Badge ───────────────────────────────────────────────────────────── */
.dw-demo-badge {
    position: absolute !important;
    top: 10px !important;
    left: 10px !important;
    z-index: 10 !important;
    background: rgba(127, 119, 221, 0.25) !important;
    border: 1px solid rgba(127, 119, 221, 0.55) !important;
    border-radius: 50px !important;
    color: #b0a8e0 !important;
    font-size: 11px !important;
    letter-spacing: 1px !important;
    padding: 4px 12px !important;
    font-family: monospace !important;
    text-transform: uppercase !important;
    pointer-events: none !important;
}

/* ── Debug-Overlay ────────────────────────────────────────────────────────── */
.dw-world-container:not([data-debug="true"]) #dw-layer-debug {
    display: none !important;
}
.dw-world-container[data-debug="true"] #dw-layer-debug {
    display: block !important;
}

/* ── Nebel-Layer [Phase B] ────────────────────────────────────────────────── */
.dw-fog {
    pointer-events: none !important;
}

/* ── Element-Layer [Phase B] ──────────────────────────────────────────────── */
#dw-layer-elements {
    pointer-events: none !important;
}

/* ── Fehlermeldungen ─────────────────────────────────────────────────────── */
.dw-world-error {
    background: rgba(180, 60, 60, 0.10) !important;
    border: 1px solid rgba(180, 60, 60, 0.40) !important;
    border-radius: 8px !important;
    padding: 16px 20px !important;
    color: #d4a0a0 !important;
    font-family: system-ui, sans-serif !important;
    font-size: 14px !important;
    line-height: 1.7 !important;
    max-width: 640px !important;
}
.dw-world-error code {
    background: rgba(255, 255, 255, 0.08) !important;
    padding: 1px 5px !important;
    border-radius: 4px !important;
    font-size: 12px !important;
}

/* Responsive */
@media (max-width: 768px) {
    .dw-world-container { width: 100% !important; }
    .dw-tooltip { font-size: 12px !important; padding: 7px 11px !important; }
}
.dw-world-container svg {
    display: block !important;
    max-width: 100% !important;
}

/* ══════════════════════════════════════════════════════════════════════════ */
/* ── Layer 7: Quests & In-Map Overlay (Phase C+) ─────────────────────────── */
/* ══════════════════════════════════════════════════════════════════════════ */

.dw-quest-marker {
    cursor: pointer;
}

/* LÖSUNG FÜR DAS SPRINGEN: Wir skalieren nur das Innere, der Ankerpunkt bleibt stabil! */
.dw-quest-marker-inner {
    transition: transform 0.2s ease, filter 0.2s ease;
    transform-origin: 0 0;
}
.dw-quest-marker:hover .dw-quest-marker-inner {
    transform: scale(1.25);
    filter: brightness(1.3) contrast(1.2);
}

.dw-quest-overlay {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    z-index: 999999;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(12, 8, 20, 0.6);
    backdrop-filter: blur(8px) saturate(0.8);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}
.dw-quest-overlay--active {
    opacity: 1;
    pointer-events: auto;
}

.dw-quest-modal {
    position: relative;
    width: 90%;
    max-width: 550px;
    background: linear-gradient(135deg, #fdfbf7 0%, #e8dcc8 100%);
    border: 2px solid #8b6a4a;
    border-radius: 4px;
    box-shadow: 0 20px 50px rgba(0,0,0,0.5), 0 0 0 6px rgba(44, 30, 22, 0.8), inset 0 0 30px rgba(139, 106, 74, 0.2);
    padding: 40px;
    transform: translateY(20px) scale(0.95);
    transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    color: #2c1e16;
    font-family: 'Cormorant Garamond', Georgia, serif;
}
.dw-quest-overlay--active .dw-quest-modal {
    transform: translateY(0) scale(1);
}

.dw-quest-close {
    position: absolute;
    top: 10px; right: 15px;
    background: none; border: none;
    font-size: 32px;
    color: #8b6a4a;
    cursor: pointer;
    transition: color 0.2s ease, transform 0.2s ease;
}
.dw-quest-close:hover { color: #5a3d24; transform: scale(1.1); }

.dw-quest-meta { display: flex; gap: 10px; margin-bottom: 15px; }
.dw-quest-badge {
    background: #2c1e16; color: #c4975a; font-family: system-ui, sans-serif;
    font-size: 11px; text-transform: uppercase; letter-spacing: 1px;
    padding: 4px 10px; border-radius: 20px; border: 1px solid #c4975a;
}
.dw-quest-badge--alt { background: transparent; color: #8b6a4a; border-color: #8b6a4a; }

.dw-quest-title {
    font-size: 32px; margin: 0 0 15px 0; line-height: 1.1; color: #1a110d;
    border-bottom: 1px solid rgba(139, 106, 74, 0.3); padding-bottom: 15px;
}

.dw-quest-hint {
    background: rgba(196, 151, 90, 0.15); border-left: 3px solid #c4975a;
    padding: 10px 15px; font-style: italic; margin-bottom: 20px; font-size: 18px; color: #4a3320;
}

.dw-quest-body p { font-size: 19px; line-height: 1.6; margin-bottom: 20px; color: #3a2e24; }

.dw-quest-actions { margin-top: 30px; text-align: right; }
.dw-btn-accept {
    background: #2c1e16; color: #e8dcc8; border: 2px solid #c4975a;
    padding: 12px 24px; font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: 20px; font-weight: bold; cursor: pointer; transition: all 0.2s ease;
    border-radius: 3px; box-shadow: 0 4px 10px rgba(0,0,0,0.2);
}
.dw-btn-accept:hover {
    background: #c4975a; color: #2c1e16; border-color: #2c1e16;
    transform: translateY(-2px); box-shadow: 0 6px 15px rgba(0,0,0,0.3);
}
.dw-btn--loading { opacity: 0.7; pointer-events: none; cursor: wait; }

.dw-quest-loader { text-align: center; padding: 40px 0; color: #8b6a4a; }
.dw-quest-loader-rune {
    font-size: 40px; margin-bottom: 15px; animation: dw-spin-pulse 2s infinite linear;
}
@keyframes dw-spin-pulse {
    0% { transform: rotate(0deg) scale(1); opacity: 0.5; }
    50% { transform: rotate(180deg) scale(1.3); opacity: 1; color: #c4975a; }
    100% { transform: rotate(360deg) scale(1); opacity: 0.5; }
}

@media (max-width: 768px) {
    .dw-quest-modal { padding: 25px; }
    .dw-quest-title { font-size: 26px; }
    .dw-quest-body p { font-size: 17px; }
}

/* ── Zoom Controls ── */
.dw-zoom-controls {
    position: absolute;
    bottom: 30px;
    right: 30px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    z-index: 100;
}
.dw-zoom-btn {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(28, 20, 15, 0.85);
    border: 2px solid #8b6a4a;
    color: #e8dcc8;
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(0,0,0,0.4);
    backdrop-filter: blur(4px);
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}
.dw-zoom-btn:hover {
    background: #8b6a4a;
    color: #1c140f;
    transform: scale(1.1);
}

/* ══════════════════════════════════════════════════════════════════════════ */
/* ── Avatar, Aktive Pfade & Performance Fixes ────────────────────────────── */
/* ══════════════════════════════════════════════════════════════════════════ */

/* Fließende, leuchtende Wege (Hardware-beschleunigt via CSS statt SVG) */
#dw-layer-quests {
    /* Eigene GPU-Compositing-Ebene für alle Animationen */
    will-change: transform;
    contain: layout paint style;
}

.dw-path-flow {
    animation: dwPathFlow 1.2s linear infinite;
    will-change: stroke-dashoffset;
}
@keyframes dwPathFlow {
    to { stroke-dashoffset: -35; }
}

/* Pulsierender Quest-Marker (Hardware-beschleunigt) */
.dw-marker-pulse {
    /* transform-box: fill-box ist PFLICHT in SVG:
       Ohne es zeigt transform-origin: center auf den Viewport-Ursprung (0,0),
       nicht auf das Element — das erzeugt die Hin-und-Her-Bewegung! */
    transform-box: fill-box;
    transform-origin: center;
    animation: dwMarkerPulse 2.5s ease-in-out infinite;
    will-change: opacity;
}
@keyframes dwMarkerPulse {
    0% { transform: scale(0.8); opacity: 0.4; }
    50% { transform: scale(1.2); opacity: 0.8; }
    100% { transform: scale(0.8); opacity: 0.4; }
}

/* ── Zusätzliche Buttons für das Overlay ── */
.dw-quest-actions {
    display: flex;
    justify-content: flex-end;
    gap: 15px;
}
.dw-btn-complete {
    background: transparent;
    color: #4a8b5a;
    border: 2px solid #4a8b5a;
    padding: 12px 24px;
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: 20px;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.2s ease;
    border-radius: 3px;
}
.dw-btn-complete:hover {
    background: #4a8b5a;
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 6px 15px rgba(74, 139, 90, 0.3);
}

/* ── Quest Status & Error ────────────────────────────────────────────────── */
.dw-quest-status {
    margin-top: 10px;
    padding: 8px 12px;
    border-radius: 6px;
    font-size: 0.9em;
    font-style: italic;
}
.dw-quest-status--ok  { background: rgba(100, 180, 100, 0.15); color: #3a7a3a; }
.dw-quest-status--err { background: rgba(200, 80,  80, 0.15);  color: #8a2020; }
.dw-quest-error       { color: #8a2020; font-style: italic; }