/* ===========================
   CSS VARIABLES
   =========================== */
:root {
    --bg-paper: #e8dac6;
    --border-outer: #2a1a11;
    --ocean-color: #a7ddf6; 
    --ink-color: #1a0f0a;
    --sand-color: #e8dac6;
}

/* ===========================
   GLOBAL STYLES
   =========================== */
body {
    margin: 0;
    background-color: #fff5eb;
    font-family: 'MedievalSharp', cursive;
    color: var(--ink-color);
}

/* ===========================
   MAP FRAME
   =========================== */
.map-frame {
    position: relative;
    width: 900px;
    max-width: 900px;
    aspect-ratio: 1536/981; 
    background-color: var(--bg-paper);
    padding: 12px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.inner-frame {
    width: 100%;
    height: 100%;
    border: 2px solid var(--border-outer);
    position: relative;
    overflow: hidden;
    background-color: var(--ocean-color);
    background-image: url("data:image/svg+xml,%3Csvg width='400' height='400' viewBox='0 0 400 400' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.15'/%3E%3C/svg%3E");
}

svg {
    width: 100%;
    height: 100%;
}

.overlay-svg, .overlay-svg-text, .overlay-fog {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    pointer-events: none;
}

/* ===========================
   FOG OF WAR - FANCY CLOUDS
   =========================== */
.overlay-fog {
    mix-blend-mode: normal;
}

/* Individual fog layers with staggered animations */
.fog-layer {
    mix-blend-mode: screen;
}

.fog-layer-1 {
    animation: fog-drift-1 45s ease-in-out infinite;
}

.fog-layer-2 {
    animation: fog-drift-2 60s ease-in-out infinite;
}

.fog-layer-3 {
    animation: fog-drift-3 50s ease-in-out infinite;
}

/* Cloud elements with smooth transitions */
.fog-cloud {
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
    transform-origin: center;
}

.fog-cloud.hidden {
    opacity: 0 !important;
    visibility: hidden;
    pointer-events: none;
}

/* Subtle drift animations for mystical effect */
@keyframes fog-drift-1 {
    0%, 100% {
        transform: translate(0, 0);
        opacity: 1;
    }
    25% {
        transform: translate(3px, -2px);
        opacity: 0.95;
    }
    50% {
        transform: translate(-2px, 3px);
        opacity: 0.98;
    }
    75% {
        transform: translate(2px, 2px);
        opacity: 0.96;
    }
}

@keyframes fog-drift-2 {
    0%, 100% {
        transform: translate(0, 0);
        opacity: 1;
    }
    33% {
        transform: translate(-3px, 2px);
        opacity: 0.97;
    }
    66% {
        transform: translate(2px, -3px);
        opacity: 0.94;
    }
}

@keyframes fog-drift-3 {
    0%, 100% {
        transform: translate(0, 0);
        opacity: 1;
    }
    20% {
        transform: translate(2px, 3px);
        opacity: 0.96;
    }
    40% {
        transform: translate(-2px, -2px);
        opacity: 0.98;
    }
    60% {
        transform: translate(3px, -1px);
        opacity: 0.95;
    }
    80% {
        transform: translate(-1px, 2px);
        opacity: 0.97;
    }
}

/* ===========================
   DECORATIVE CORNERS
   =========================== */
.corner {
    position: absolute;
    width: 40px;
    height: 40px;
    border: 3px solid var(--border-outer);
    z-index: 20;
}

.c-tl { top: 6px; left: 6px; border-right: none; border-bottom: none; }
.c-tr { top: 6px; right: 6px; border-left: none; border-bottom: none; }
.c-bl { bottom: 6px; left: 6px; border-right: none; border-top: none; }
.c-br { bottom: 6px; right: 6px; border-left: none; border-top: none; }

/* ===========================
   REGIONS
   =========================== */
.region {
    stroke: #5c4033;
    stroke-width: 2px; 
    stroke-linejoin: round;
    stroke-linecap: round;
    transition: fill 0.3s ease, fill-opacity 0.3s ease, stroke-width 0.3s ease; 
    fill: var(--sand-color); 
    fill-opacity: 1; 
    vector-effect: non-scaling-stroke;
    filter: drop-shadow(1px 2px 3px rgba(0,0,0,0.2));
}

.region:hover {
    stroke: #2a1a11;
    fill: #d1bc86;
    stroke-width: 4px; 
}

.region.settled {
    fill-opacity: 1; 
    stroke: #1a0f0a;
    stroke-width: 3px;
    filter: drop-shadow(2px 4px 4px rgba(0,0,0,0.4));
    transition: fill 0.5s ease;
}

/* ===========================
   REGION COLORS
   =========================== */
/* Barvy se nyní načítají dynamicky z config.js */

/* ===========================
   LABELS
   =========================== */
.label-group {
    pointer-events: none;
    transition: all 0.4s ease;
    z-index: 1000;
}

.label-text {
    font-family: 'Cinzel Decorative', cursive;
    font-weight: 700;
    text-anchor: middle;
    font-size: 24px; 
    fill: #3e2723;
    opacity: 0.7;
    stroke: rgba(255,255,255,0.6);
    stroke-width: 3px;
    paint-order: stroke fill;
}

.label-group.active .label-text {
    fill: #000;
    opacity: 1;
    font-size: 32px;
    stroke: rgba(255,255,255,0.9);
    stroke-width: 4px;
}

/* ===========================
   UI COMPONENTS
   =========================== */
.legend-box {
    position: absolute;
    bottom: 20px;
    right: 20px;
    background: rgba(232, 218, 198, 0.95);
    padding: 15px 25px;
    border: 2px solid var(--border-outer);
    box-shadow: 0 4px 10px rgba(0,0,0,0.2);
    z-index: 500;
}

.legend-title {
    font-family: 'Cinzel Decorative', cursive;
    margin: 0;
    font-size: 3rem;
    color: #2a1a11;
    border-bottom: 2px solid #2a1a11;
}

.legend-subtitle {
    font-style: italic;
    margin-top: 5px;
    font-size: 1.5rem;
}