/* =====================================================
   DESKTOP
===================================================== */

@media
(min-width: 900px)
{
    /* #bgMain,
    #bgDepth
    {
        width:100vw;
        height:auto;
        bottom:0;
        object-fit:cover;
        object-position:center bottom;
    } */
    /* #logo
    {
        width:min(
            90vw,
            1180px
        );
    } */
}

/* =====================================================
   MOBILE / TABLET
===================================================== */


/* @media (max-width: 899px) */
@media (max-width: 1024px)
{    
    #topPanel {
        flex-direction: column;
        height: auto; /* Сбрасываем фиксированную высоту 46px */        
        /* Внутренние отступы*/
        padding: 10px 0;        

        gap: 15px;
        border-radius: 16px;      
    }

    #pageAbout {
        padding-top: 200px;       
        padding-bottom: 40px;
    }

    #pageContacts {
        padding-top: 200px;       
        padding-bottom: 40px;
    }

    #pageSupport {
        padding-top: 200px;
        padding-bottom: 40px;
    }

    #topPanel button {
        width: 80%;               /* Кнопки будут аккуратными и одинаковыми по ширине */
        max-width: 200px;
        padding: 8px 0;           /* Добавим им немного высоты для удобного тапа пальцем */
    }

    .level-stencil {
    bottom: 700px;
    left: 190px;

    font-size: 52px;
    transform: rotate(-90deg);
    }

    .portalSign,
    .portalSignR
    {
        transform: scale(1.9);
    }

    .portalSign{
        /* left: 92px+90px; */
        left: 210px;

        /* top: 40px; */
    }
    .portalSignR{
        /* left: -320px; */
        left: -420px;
        top: 360px;
    }


    #Roy_001
    {

        /* width: 500px; */
        /* height: 800px;   */
        
        left: 990px;
        bottom:316px;

    }

    /*
        DIALOG
    */

    /* Спрайт Роя слева */
    .roy-full-sprite {
        position: absolute;
        /* left: 6%; */
        /* left: 50%;  */

        /* transform: translateX(-50%); */

        bottom: 40px; 
        /* height: 85vh; */
        /* z-index: 1; */
        /* pointer-events: none; */
    }
    /* Нижнее диалоговое облако */
    .dialog-box {
        position: relative;
        /* width: min(1200px, 90vw); */
        /* min-height: 200px; */
        margin: 0 auto 80px auto;
        /* background: rgba(15, 15, 15, 0.95); */
        /* border: 2px solid #333; */
        border-radius: 30px;
        padding: 20px;
        /* box-sizing: border-box; */
        /* height: 40vh; */
        max-height: 350px;
        overflow-y: auto;        /* Всё, что не поместилось, будет скроллиться */
    
        box-sizing: border-box;

    }

    /* Имя персонажа */
    .dialog-name {
        font-family: monospace;
        font-size: 18px;
        /* font-weight: bold; */
        /* color: #fff; */
        margin-bottom: 10px;
        /* text-transform: uppercase; */
        /* letter-spacing: 2px; */
        /* padding-bottom: 5px; */
        /* display: inline-block; */
    }

    /* Текст реплики Роя */
    .dialog-text {
        /* font-family: sans-serif; */
        font-size: 14px;
        line-height: 1.4;
        /* color: #ccc; */
        /* margin-bottom: 25px; */
    }

    /* Контейнер вариантов ответов */
    .options-container {
        /* display: flex; */
        /* flex-direction: column; */
        gap: 6px;
    }

    /* Кнопки-варианты ответов игрока */
    .dialog-option-btn {
        /* background: rgba(255, 255, 255, 0.05); */
        /* border: 1px solid #444; */
        border-radius: 14px;
        padding: 8px 12px;
        /* color: #fff; */
        font-size: 13px;
        line-height: 1.4;
        /* text-align: left; */
        /* cursor: pointer; */
        /* transition: all 0.2s ease; */
    }


    


    /*
        WORLD
    */

    #world
    {
        overflow:hidden;
    }

}

/* =====================================================
   SMALL PHONES
===================================================== */

@media
(max-width:480px)
{    /* #logo
    {
        width:100vw;
    } */
}

/* =====================================================
   VERY TALL SCREENS
===================================================== */

@media
(max-height:700px)
{
    /* #leftPortal,
    #rightPortal
    {
        bottom:8%;
    } */
}