/* AETHER WORLD CONTROLS: world-overlay layout only. */

.aether-world-controls,
.aether-world-menu-panel {

    position:
        fixed;


    left:
        50%;


    right:
        auto;


    width:
        max-content;


    max-width:
        calc(100vw - 48px);


    padding:
        10px 18px;


    display:
        flex;


    justify-content:
        center;


    pointer-events:
        none;


    align-items:
        center;


    bottom:
        24px !important;


    transform:
        translateX(-50%);


    gap:
        0 !important;


    isolation:
        isolate;

}


.aether-world-controls {

    bottom:
        clamp(28px, 4vh, 72px) !important;

    height:
        var(--aether-perception-panel-height);

    padding-top:
        0;

    padding-bottom:
        0;

}


.aether-world-control-panel {

    height:
        var(--aether-perception-panel-height);

    min-height:
        var(--aether-perception-panel-height);

    flex:
        0 0 auto;

    padding:
        0 18px;

    pointer-events:
        auto;

}


.aether-world-control-panel > button,
.aether-world-menu-panel > button {

    pointer-events:
        auto;

}


/* Illustration assets replace only a control's material, never its
semantic button or input binding. */
.aether-world-control-panel.has-aether-world-control-art,
.aether-world-menu-panel.has-aether-world-control-art {

    height:
        auto;

    min-height:
        0;

    padding:
        0;

}


.aether-world-control-panel.has-aether-world-control-art
> .aether-ui-button-panel-background,
.aether-world-menu-panel.has-aether-world-control-art
> .aether-ui-button-panel-background {

    display:
        none;

}


.aether-world-controls
.aether-ui-button.has-aether-world-control-art,
.aether-world-menu-panel
.aether-ui-button.has-aether-world-control-art {

    width:
        clamp(160px, 16vw, 250px);

    padding:
        0 !important;

    background:
        transparent !important;

}


.aether-world-control-art {

    display:
        block;

    width:
        100%;

    height:
        auto;

    pointer-events:
        none;

}


.aether-world-menu-panel.has-aether-world-control-art {

    top:
        50%;

    bottom:
        auto !important;

    transform:
        translateY(-50%);

}


.aether-world-menu-panel
.aether-ui-button.has-aether-world-control-art {

    width:
        clamp(208px, 20vw, 312px);

}


.aether-world-menu-panel {

    top:
        0;

    bottom:
        auto !important;

    height:
        var(--aether-perception-panel-height);

    min-height:
        var(--aether-perception-panel-height);

    padding-top:
        0;

    padding-bottom:
        0;

    left:
        clamp(
            24px,
            2.8vw,
            48px
        );

    right:
        auto;

    transform:
        none;

}


.aether-world-controls::before {

    display:
        none;

}


.aether-world-control-label {

    position:
        relative;

    font-family:
        var(--aether-font-interface);


    z-index:
        4;

}