/******************************************************************************
 * Which Is Bigger? — Menu Controls — Version 0.2.32 Alpha
 ******************************************************************************/

#menu-control {
    position:absolute;
    top:50%;
    right:0;
    width:25%;
    display:flex;
    justify-content:center;
    transform:translateY(-50%);
    z-index:5;
}

#menu-button {
    width:min(190px, 82%);
    padding:10px 14px;
    border:1px solid var(--color-border);
    border-radius:10px;
    background:var(--color-surface-light);
    color:var(--color-text);
    font:inherit;
    font-size:clamp(.8rem,1.5vw,1rem);
    font-weight:700;
}

#menu-button:hover {
    background:var(--color-surface-light);
}

#menu-button:disabled {
    opacity:.45;
    cursor:not-allowed;
}

#menu-button:disabled:hover {
    transform:none;
}

#menu-button:focus-visible,
.menu-item:focus-visible {
    outline:2px solid var(--color-primary-hover);
    outline-offset:2px;
}

#menu-panel {
    position:absolute;
    top:calc(100% + 8px);
    right:9%;
    width:min(290px, 84vw);
    padding:8px;
    border:1px solid rgba(96,165,250,.45);
    border-radius:12px;
    background:rgba(15,23,42,.98);
    box-shadow:0 18px 40px rgba(0,0,0,.42);
    z-index:20;
}

#menu-panel[hidden] {
    display:none;
}

.menu-item {
    width:100%;
    padding:11px 12px;
    border:0;
    border-radius:8px;
    background:transparent;
    color:var(--color-text);
    text-align:left;
    font:inherit;
    font-size:.92rem;
    font-weight:700;
    transform:none;
}

.menu-item:hover {
    background:rgba(96,165,250,.12);
    transform:none;
}

.menu-item:active {
    transform:none;
}

.menu-item:disabled {
    color:var(--color-text-muted);
    opacity:.48;
    cursor:not-allowed;
}

.menu-item:disabled:hover {
    background:transparent;
}

.menu-item-dev {
    color:var(--color-warning);
}

.menu-divider {
    height:1px;
    margin:6px 4px;
    background:rgba(7, 60, 109, .32);
}

@media(max-width:700px) {
    #menu-button {
        width:88%;
        padding:8px 6px;
        font-size:clamp(.66rem,2.8vw,.82rem);
    }

    #menu-panel {
        right:5%;
        width:min(260px, 88vw);
    }

    .menu-item {
        padding:10px;
        font-size:.84rem;
    }
}