/*
=====================================================
AETHER WORLD OVERLAY
=====================================================

Persistent world-facing Aether UI.

This file owns the visual language and placement for location,
minimap, movement controls, and focus prompts. Shared motion lives
in the global Aether motion contract.
=====================================================
*/


/*
=====================================================
WORLD-FACING AETHER PANELS
=====================================================

Normal-world Aether shares the Entity View language:

- local inverted lens surfaces
- flat signal frames
- restrained accent light

The pieces remain fragmented HUD elements, not a full
screen menu.
=====================================================
*/


.aether-world-location,
.aether-world-minimap,
.aether-world-focus {

    position:
        absolute;


    isolation:
        isolate;


    overflow:
        hidden;


    color:
        #f1f2f4;


    text-transform:
        uppercase;


    border:

        1px solid
        rgba(
            var(
                --aether-ui-rgb,
                200, 204, 211
            ),
            0.13
        );


    background:

        linear-gradient(
            135deg,

            rgba(
                5,
                8,
                16,
                0.22
            ),

            rgba(
                255,
                255,
                255,
                0.022
            )
        );


    box-shadow:

        0 14px 42px
        rgba(
            0,
            0,
            0,
            0.08
        );


    backdrop-filter:

        blur(3px)
        brightness(0.94);


    -webkit-backdrop-filter:

        blur(3px)
        brightness(0.94);


    border-radius:
        0 !important;


    clip-path:
        none !important;

}


.aether-world-location::before,
.aether-world-minimap::before,
.aether-world-focus::before {

    display:
        none;

}


.aether-world-minimap::before,
.aether-world-minimap::after {

    display:
        none;

}


.aether-world-location {

    top:
        24px;


    left:
        24px;


    width:
        min(360px, calc(100vw - 260px));


    padding:
        14px 16px;


    box-sizing:
        border-box;

}


.aether-world-location::after,
.aether-world-minimap::after,
.aether-world-focus::after {

    content:
        "";


    position:
        absolute;


    left:
        0;

    right:
        0;

    top:
        0;


    height:
        1px;


    pointer-events:
        none;


    z-index:
        2;


    border-radius:
        0;


    background:

        linear-gradient(
            90deg,

            var(
                --aether-ui-accent,
                #c8ccd3
            )
            0%,

            rgba(
                255,
                255,
                255,
                0.26
            )
            42%,

            transparent
            100%
        );


    opacity:
        0.72;

}


.aether-world-kicker,
.aether-world-title,
.aether-world-detail {

    position:
        relative;


    z-index:
        1;

}


.aether-world-location > *,
.aether-world-focus > *,
.aether-world-minimap > * {

    position:
        relative;


    z-index:
        3;

}


.aether-world-kicker {

    margin-bottom:
        5px;


    font-size:
        9px;


    letter-spacing:
        0.20em;


    color:
        var(
            --aether-ui-accent,
            #c8ccd3
        );


    opacity:
        0.68;

}


.aether-world-title {

    font-size:
        15px;


    font-weight:
        400;


    letter-spacing:
        0.10em;


    color:
        #f1f3fb;


    text-shadow:

        0 0 18px
        rgba(
                255,
                255,
                255,
                0.14
            );


}


.aether-world-detail {

    margin-top:
        7px;


    max-width:
        330px;


    font-size:
        9px;


    line-height:
        1.55;


    letter-spacing:
        0.05em;


    opacity:
        0.44;

}


.aether-world-minimap canvas {

    position:
        relative;


    z-index:
        1;


    background:
        transparent;

}


.aether-world-minimap-surface {

    position:
        relative;


    z-index:
        1;


    display:
        block;


    align-self:
        flex-end;

}


.aether-world-minimap-shape {

    position:
        absolute;


    inset:
        0;


    z-index:
        0;


    pointer-events:
        none;


    background:

        linear-gradient(
            135deg,

            rgba(
                5,
                8,
                16,
                0.30
            ),

            rgba(
                255,
                255,
                255,
                0.022
            )
        );


    backdrop-filter:
        blur(3px)
        brightness(0.94);


    -webkit-backdrop-filter:
        blur(3px)
        brightness(0.94);

}


.aether-world-minimap > div:first-child {

    position:
        relative;


    z-index:
        1;


    margin-bottom:
        9px !important;


    text-transform:
        uppercase;


    text-align:
        right;

    font-size:
        clamp(
            14px,
            1.3vw,
            22px
        );

    letter-spacing:
        0.07em;

    line-height:
        1.1;


    text-shadow:

        0 0 13px
        rgba(
            255,
            255,
            255,
            0.16
        );

}


.aether-world-focus-surface::after {

    content:
        "";


    position:
        absolute;


    inset:
        0;


    z-index:
        1;


    pointer-events:
        none;


    opacity:
        0;


    mix-blend-mode:
        screen;


    background:

        linear-gradient(
            165deg,
            transparent 0%,
            rgba(255, 255, 255, 0.22) 16%,
            transparent 32%,
            transparent 68%,
            rgba(0, 0, 0, 0.18) 100%
        ),

        radial-gradient(
            circle at 18% 32%,
            rgba(255, 255, 255, 0.28),
            transparent 18%
        ),

        radial-gradient(
            circle at 72% 58%,
            rgba(
                var(
                    --aether-ui-rgb,
                    200, 204, 211
                ),
                0.24
            ),
            transparent 20%
        ),

        repeating-linear-gradient(
            115deg,
            rgba(255, 255, 255, 0.10) 0,
            rgba(255, 255, 255, 0.10) 1px,
            transparent 1px,
            transparent 7px
        );


    background-size:

        140px 90px,
        180px 120px,
        96px 96px;


    filter:
        blur(5px);


    transition:
        opacity var(--aether-motion-surface-interaction-duration) ease;

}


.aether-world-overlay,
.aether-world-overlay * {

    color:
        #000 !important;

}


/* Atmospheric corner artwork is separate from the mechanical controls. */
.aether-world-decorations {

    position:
        absolute;

    inset:
        0;

    z-index:
        1;

    pointer-events:
        none;

}


.aether-world-decoration {

    position:
        absolute;

    display:
        block;

    width:
        clamp(380px, 42vw, 660px);

    aspect-ratio:
        294.5 / 126;

    height:
        auto;

    pointer-events:
        none;

}


.aether-world-decoration-base {

    position:
        absolute;

    inset:
        0;

    display:
        block;

    width:
        100%;

    height:
        100%;

    object-fit:
        fill;

}


.aether-world-decoration--top-left {

    bottom:
        5px;

    right:
        5px;

}


.aether-world-decoration--top-left
> .aether-world-decoration-base {

    transform:
        scaleY(-1);

}


.aether-world-decoration--top-right {

    bottom:
        5px;

    left:
        5px;

}


.aether-world-decoration--top-right
> .aether-world-decoration-base {

    transform:
        scale(-1);

}


.aether-world-decoration--bottom-left {

    top:
        5px;

    right:
        5px;

}


.aether-world-decoration--bottom-right {

    left:
        5px;

    top:
        5px;

}


.aether-world-decoration--bottom-right
> .aether-world-decoration-base {

    transform:
        scaleX(-1);

}



@media (
    max-width: 620px
) {

    .aether-world-controls {

        gap:
            7px !important;

    }


    .aether-world-controls button {

        min-width:
            0;


        width:
            min(30vw, 116px);


        padding:
            11px 8px !important;


        font-size:
            9px;

    }


    .aether-world-location {

        width:
            min(320px, calc(100vw - 48px)) !important;

    }

}



@media (
    prefers-reduced-motion:
        reduce
) {

    .aether-world-overlay {

        transition:
            none;

    }

}