/* ==============================================
   WEB DESKTOP STYLES
   Стили для web-версии: десктопный фон за колонкой,
   web header с логотипом (вместо Telegram header).
   ============================================== */

/* --- Десктопный фон за центрированной колонкой --- */
body.web-platform {
    background: #f0f2f5;
    background-attachment: fixed;
    min-height: 100vh;
    margin: 0;
}

@media (min-width: 841px) {
    body.web-platform,
    body.web-platform.nav-expanded {
        padding-bottom: 0;
    }
}

body.web-platform .container,
body.web-platform #app,
body.web-platform .quiz-container,
body.web-platform .pvp-container,
body.web-platform .pvp-match-container,
body.web-platform .result-page,
body.web-platform .history-page,
body.web-platform .ranking-page,
body.web-platform .rules-container,
body.web-platform .detail-page,
body.web-platform .arena-container,
body.web-platform .privacy-wrapper {
    max-width: 800px;
    margin: 0 auto;
    background: var(--tg-theme-bg-color, #ffffff);
    min-height: 100vh;
    box-shadow: 0 0 60px rgba(0, 0, 0, 0.15);
    position: relative;
}

body.web-platform.pvp-theme .pvp-container,
body.web-platform.pvp-theme .pvp-match-container,
body.web-platform.pvp-theme .result-page,
body.web-platform.pvp-theme .history-page,
body.web-platform.pvp-theme .ranking-page,
body.web-platform.pvp-theme .rules-container,
body.web-platform.pvp-theme .detail-page,
body.web-platform.tournament-arena .arena-container {
    background: var(--pvp-bg, #0f172a);
}

/* На мобильных — без фона, всё как в Telegram */
@media (max-width: 840px) {
    body.web-platform {
        background: var(--tg-theme-bg-color, #ffffff);
    }

    body.web-platform .container,
    body.web-platform #app,
    body.web-platform .quiz-container,
    body.web-platform .pvp-container,
    body.web-platform .pvp-match-container,
    body.web-platform .result-page,
    body.web-platform .history-page,
    body.web-platform .ranking-page,
    body.web-platform .rules-container,
    body.web-platform .detail-page,
    body.web-platform .arena-container,
    body.web-platform .privacy-wrapper {
        box-shadow: none;
    }
}

/* Web-header скрыт — вместо него используется штатный top-header */
.web-header {
    display: none !important;
}


/* --- Фоновые иллюстрации (река) по бокам контента --- */
.bg-left,
.bg-right {
    display: none;
}

@media (min-width: 841px) {
    body.web-platform .bg-left,
    body.web-platform .bg-right {
        display: block;
        position: fixed;
        top: 0;
        width: calc((100vw - 800px) / 2);
        height: 100vh;
        background-size: auto 100%;
        background-repeat: no-repeat;
        pointer-events: none;
        z-index: 0;
    }
    body.web-platform .bg-left {
        left: 0;
        background-image: url('/webapp_bot/static/images/left.jpeg');
        background-position: left center;
    }
    body.web-platform .bg-right {
        right: 0;
        background-image: url('/webapp_bot/static/images/right.jpeg');
        background-position: right center;
    }

    body.web-platform .container,
    body.web-platform #app,
    body.web-platform .quiz-container,
    body.web-platform .pvp-container,
    body.web-platform .pvp-match-container,
    body.web-platform .result-page,
    body.web-platform .history-page,
    body.web-platform .ranking-page,
    body.web-platform .rules-container,
    body.web-platform .detail-page,
    body.web-platform .arena-container,
    body.web-platform .privacy-wrapper {
        z-index: 1;
    }
}

/* Двухколоночный layout для списка викторин на десктопе */
@media (min-width: 600px) {
    body.web-platform .quiz-list {
        grid-template-columns: 1fr 1fr;
    }
}