/*  ---------------------------------------------------------------------------------------------------------------------------- */
/*  map | screen container                                                                                                     */
/*  ---------------------------------------------------------------------------------------------------------------------------- */


/*  map screen container */
    #wyvern-layer-map
    {
        top:0;
        position:absolute;
        width:100%;
        height:100%;
        z-index: 900;
        margin:auto;
        overflow: hidden;
        display:block;



    }

/*  map container - this is the viewport through which we see the map */
    #wyvern-layer-map #map-container
    {
        position:absolute;

        top:0;
        width:100%;
        height:100%;

        min-height:200px;
        background: rgba(43, 43, 43, 0.77);
        display:block;

    /*  3d settings */
        transform:perspective(20px);
        transform-style: preserve-3d;

    /*  new version ( map as an overlay ) */
        /*
        width:1400px!important;
        height: 800px!important;
        left:100px;
        top:150px;
        overflow:hidden;
        */


        width:1600px!important;
        height: 900px!important;
        left:0px;
        top:0px;
        overflow:hidden;


    }

/*  map layer - preserve 3d because we want clouds and other elements in the map to keep their 3d properties  */
    #wyvern-layer-map #map-container #map-layer
    {
    /*  default styles */
        width:3200px;
        height:2560px;
        background: url("../../../../../../assets/media/world.jpg") no-repeat center center;");
        z-index: 1000;

    /*  3d settings */
        /* transform:perspective(20px); */
        transform-style: preserve-3d;
        transform-origin: center;
        transform:translateZ(1px) scale(1.0);
    }

/*  ---------------------------------------------------------------------------------------------------------------------------- */
/*  map | wip                                                                                                                    */
/*  ---------------------------------------------------------------------------------------------------------------------------- */

    #wyvern-layer-map #map-event-stage-container
    {
        width:600px;
        height:250px;
        position:absolute;
        display:block;

        left:0;
        right:0;
        top:150px;

        margin: auto;
        text-align: center;
        background: rgba(0, 0, 0, 0.8);
        backdrop-filter: blur(3px);
        border-radius:4px;
        z-index: 1100;
        border:3px white solid ;
        box-shadow: rgba(0, 0, 0, 0.6) 0 13px 27px -5px, rgba(0, 0, 0, 0.5) 0 8px 16px -8px;
        overflow: hidden;
    }

    #wyvern-layer-map #map-event-stage-title
    {
        width:400px;
        height: 40px;
        margin: auto;
        display:block;
        position:absolute;
        z-index: 1200;
        text-align: center;
        line-height: 40px;
        font-size: 20px;
        box-shadow: -1px 6px 11px 0 rgba(0,0,0,0.3);
        border-radius: 40px;
        top:100px;
        left:0;
        right:0;

        background-color: rgba(23, 23, 23, 1.0);

    }
    #wyvern-layer-map #map-event-stage-subtitle
    {
        width: 400px;
        height: 30px;
        margin: auto;
        display: block;
        position: absolute;
        z-index: 1200;
        text-align: center;
        line-height: 30px;
        font-size: 16px;
        box-shadow: -1px 6px 11px 0 rgba(0,0,0,0.3);
        border-radius: 30px;
        top: 420px;
        left: 0;
        right: 0;
        background-color: rgba(23, 23, 23, 1.0);
    }

    #wyvern-layer-map #map-event-caption-container
    {
        width:700px;
        height:100px;
        position:absolute;
        display:block;

        left:0;
        right:0;
        top:550px;
padding:10px;
        margin: auto;
        text-align: center;
        background: rgba(0, 0, 0, 0.8);
        backdrop-filter: blur(3px);
        border-radius:6px;
        z-index: 1100;
        border:4px white solid ;
        box-shadow: rgba(0, 0, 0, 0.6) 0 13px 27px -5px, rgba(0, 0, 0, 0.5) 0 8px 16px -8px;
        overflow: hidden;
    }

/*  wraps around content and provides scroll functionality if text does not fit in the container */
    #wyvern-layer-map .map-event-content-wrapper
    {
        width:auto;
        height: 100%;
        background:transparent;
        display:block;
        margin: 0 5px 0 8px;
        overflow-x: hidden;
        overflow-y: scroll;
        padding: 0 8px 0 0;
    }
/*  the content itself , where text for the plot is mainly shown  */
    #wyvern-layer-map .map-event-content
    {
        width:100%;
        height: auto;
        background:transparent;
        display:block;
        margin:0;
        padding-bottom: 50px;
        text-align: left;
        font-weight: normal;
    }














    /*  TODO : SPRITE LAYER */
    #wyvern-layer-map #map-container #map-layer #sprite
    {
        width:50px;
        height:50px;
        position:absolute;
        top:0;
        left:0;
        display:block;
        background: rgba(255, 0, 255, 0.75);
    }
    /*  TODO : MARKER LAYER */
    #wyvern-layer-map #map-container #map-layer .marker
    {
        width:50px;
        height:50px;
        position:absolute;
        top:0;
        left:0;
        display:block;
        background: rgba(0, 0, 0, 0.75);
        cursor:pointer;
    }

    /*  TODO : CLOUD LAYER */
    #wyvern-layer-map #map-container #map-layer #cloud-layer
    {
        width:100%;
        height:100%;

        background-image: url('../../../../../../assets/media/clouds.png'); /* Use a cloud image */
        background-repeat: repeat;
        position: absolute;
        top: 0;
        left: 0;
        inset:0!important;
        z-index: 2000;
        pointer-events: none;
        opacity:0.5;
        transform:translateZ(6px);
        /*animation: scrollClouds 300s linear infinite;*/
    }
    /*  TODO : ANIMATION */
    #wyvern-layer-map @keyframes scrollClouds
    {
        from {
            transform: translateX(0);
        }
        to {
            transform: translateX(-100%); /* Scroll left */
        }
    }