* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html, body {
    width: 100%;
    height: 100%;
}

body {
    overflow: hidden;
    background: url("images/background.webp") center center no-repeat;
    background-size: cover;
    font-family: Georgia, serif;
}

/* Главный контейнер */
.page {
    position: relative;
    width: 100vw;
    height: 100vh;
}

/* =========================================
   ИСПРАВЛЕНИЯ ГРАФИКИ (Убираем белый фон)
   ========================================= */
/* Эта команда делает белые квадраты прозрачными */
.portal,
.start-btn img,
.about-btn img,
.support-btn img,
.feedback-btn img {
    mix-blend-mode: multiply !important; 
    background-color: transparent !important;
}

/* Скрываем напечатанный текст, чтобы он не двоился */
.title,
.start-btn span,
.about-btn span,
.support-btn span,
.feedback-btn span {
    display: none !important; 
}


/* =========================================
   ПОРТАЛ И КНОПКИ
   ========================================= */
.portal-container {
    position: absolute;
    left: 50%;
    top: 42%; /* ПОДНЯЛИ ПОРТАЛ ВЫШЕ (было 50%) */
    transform: translate(-50%, -50%);
    width: min(48vw, 850px);
    aspect-ratio: 1/1;
    display: flex;
    justify-content: center;
    align-items: center;
}

.portal {
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* Настройки физики кнопок */
.start-btn,
.about-btn,
.support-btn,
.feedback-btn {
    text-decoration: none;
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    z-index: 20;
    cursor: pointer; /* Курсор-рука для кликабельности */
    transition: transform 0.2s cubic-bezier(0.25, 0.8, 0.25, 1); /* Плавность */
}

.start-btn img,
.about-btn img,
.support-btn img,
.feedback-btn img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    transition: filter 0.2s ease;
}

/* Размеры и позиции кнопок */
.start-btn { width: 63%; height: 10%; top: 54%; }
.about-btn { width: 16%; height: 7%; top: 65%; }
.support-btn { left: 3%; bottom: 2%; width: min(220px, 15vw); height: auto; }
.feedback-btn { right: 3%; bottom: 2%; width: min(220px, 15vw); height: auto; }

/* =========================================
   ЭФФЕКТЫ ПРИ НАВЕДЕНИИ И КЛИКЕ
   ========================================= */
/* При наведении мыши (кнопка увеличивается и светится) */
.start-btn:hover,
.about-btn:hover,
.support-btn:hover,
.feedback-btn:hover {
    transform: scale(1.05); 
}
.start-btn:hover img,
.about-btn:hover img,
.support-btn:hover img,
.feedback-btn:hover img {
    filter: drop-shadow(0px 0px 8px rgba(231, 199, 136, 0.5));
}

/* При нажатии мышкой (кнопка вдавливается) */
.start-btn:active,
.about-btn:active,
.support-btn:active,
.feedback-btn:active {
    transform: scale(0.96); 
}



/* === АДАПТИВНОСТЬ ДЛЯ ПЛАНШЕТОВ === */

/* ─── ПОРТРЕТНАЯ ОРИЕНТАЦИЯ ПЛАНШЕТОВ ─── */
/* Подменяем фон и пересчитываем позиции клик-зон под портретную картинку */
@media (orientation: portrait) and (max-width: 1100px) {
    body {
        background-image: url("images/background-portrait.webp");
		
    }

    .portal-container {
        width: 92vw;
        max-width: 720px;
        top: 45%;
    }

    .start-btn { 
        width: 75%; 
        top: 53%;
    }

    .about-btn { 
        width: 28%; 
        top: 67%;
    }

    /* Кнопки внизу — на портретной картинке они нарисованы */
    .support-btn {
        width: min(180px, 26vw);
        height: auto;
        left: 3%;
        bottom: 3%;
    }
    .feedback-btn {
        width: min(180px, 26vw);
        height: auto;
        right: 3%;
        bottom: 3%;
    }

    /* Скрываем PNG-картинки внутри кнопок (рисунки уже на фоне) */
    .start-btn img,
    .about-btn img,
    .support-btn img,
    .feedback-btn img {
        opacity: 0;
    }
}

/* ─── АЛЬБОМНАЯ ОРИЕНТАЦИЯ ПЛАНШЕТОВ ─── */
/* Десктопная картинка, но размеры портала корректируем */
@media (orientation: landscape) and (min-width: 820px) and (max-width: 1366px) {
    .portal-container {
        width: min(65vw, 650px);
    }
    .support-btn,
    .feedback-btn {
        width: min(155px, 18vw);
    }

    /* Скрываем PNG-картинки кнопок — они проявляются на бежевом фоне */
    .start-btn img,
    .about-btn img,
    .support-btn img,
    .feedback-btn img {
        opacity: 0;
    }
}