/* =========================================================
   RESPONSIVE — мобильный макет (10.5 / 11.8)
   Извлечено из reference.html. Отдельный макет, не «схлопнутый десктоп».
   ========================================================= */

@media (max-width: 780px) {

    :root {
        --header-height: 56px;
    }

    /* ---- Шапка: гамбургер слева, лого по центру, профиль справа ---- */

    .header-inner {
        padding: 0 12px;
        gap: 10px;
    }

    .logo {
        min-width: 0;
        margin: 0 auto;
        flex: 0 1 auto;
    }

    .logo-mark {
        width: 42px;
        height: 42px;
    }

    .top-nav,
    .search,
    .login-btn {
        display: none;
    }

    .mobile-control-slot {
        display: none;
    }

    .menu-toggle,
    .profile-toggle {
        display: grid;
    }

    .header-actions {
        margin-left: 0;
        gap: 8px;
    }

    .mobile-controls-section {
        display: block;
        margin-bottom: 10px;
        padding: 12px;
        border: 1px solid var(--border-light);
        border-radius: var(--radius);
        background: var(--surface);
    }

    .mobile-controls {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 8px;
    }

    .mobile-controls #gameWrap {
        order: -1;
        flex: 1 0 100%;
    }

    .mobile-controls .game-toggle {
        width: 100%;
        justify-content: space-between;
    }

    .mobile-controls .game-panel {
        left: 0;
        right: auto;
        width: 100%;
        box-sizing: border-box;
    }

    .mobile-controls .notif-panel {
        position: fixed;
        top: 150px;
        right: 12px;
        left: 12px;
        width: auto;
        max-height: calc(100vh - 170px);
        overflow-y: auto;
    }

    .mobile-controls .notif-wrap[hidden] {
        display: none !important;
    }

    .profile-toggle {
        width: 38px;
        height: 38px;
    }

    /* ---- Layout: сайдбар становится off-canvas ---- */

    .layout {
        display: block;
        padding-bottom: calc(var(--tabbar-height) + 14px);
    }

    .sidebar {
        position: fixed;
        z-index: 110;
        top: 0;
        left: 0;
        bottom: 0;

        width: 270px;

        padding-top: 14px;

        background: var(--surface);
        border-right: 1px solid var(--border);

        transform: translateX(-100%);
        transition: transform .25s ease;

        overflow-y: auto;
    }

    .sidebar.open {
        transform: translateX(0);
    }

    .sidebar-backdrop.open {
        display: block;

        position: fixed;
        inset: 0;
        z-index: 105;

        background: rgba(0,0,0,.5);
    }

    .main {
        padding: 12px;
    }

    /* ---- Hero + карусель-точки ---- */

    .hero {
        min-height: 210px;
    }

    .hero-content {
        padding: 24px 18px;
    }

    .hero-title {
        font-size: 34px;
    }

    .hero-dots {
        display: flex;
    }

    .stats-grid {
        grid-template-columns: 1fr;
    }

    /* ---- Карточки разделов: одна колонка, без описания, с шевроном ---- */

    .forum-card {
        grid-template-columns: 40px minmax(0, 1fr) auto;
        gap: 12px;
        min-height: auto;
        padding: 13px 14px;
    }

    .forum-description,
    .forum-count,
    .forum-last {
        display: none;
    }

    .forum-mobile-meta {
        display: block;
        margin-top: 2px;
    }

    .forum-chevron {
        display: grid;
        place-items: center;
        color: var(--text-muted);
    }

    .forum-chevron svg {
        width: 18px;
        height: 18px;
    }

    /* ---- Список последних тем: компактно, с бейджем вместо колонок ---- */

    .topic-row {
        grid-template-columns: 32px minmax(0, 1fr) auto;
        gap: 12px;
        padding: 11px 14px;
    }

    .topic-section-col,
    .topic-author-col,
    .topic-num-col,
    .topic-time-col {
        display: none;
    }

    .topic-row-title {
        white-space: normal;
        -webkit-line-clamp: 2;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    .topic-row-sub {
        display: block;
        margin-top: 3px;
    }

    .topic-badge {
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    .topic-row.is-premium .topic-badge {
        background: var(--premium);
    }

    /* ---- Нижний таб-бар ---- */

    .tabbar {
        position: fixed;
        z-index: 100;
        left: 0;
        right: 0;
        bottom: 0;

        height: var(--tabbar-height);

        display: flex;
        align-items: stretch;

        background: color-mix(in srgb, var(--header-bg) 96%, transparent);
        border-top: 1px solid var(--border);

        backdrop-filter: blur(14px);
    }

    .tabbar-item {
        flex: 1;

        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 3px;

        color: var(--text-muted);

        font-size: 10px;
        font-weight: 600;
    }

    .tabbar-item svg {
        width: 19px;
        height: 19px;
    }

    .tabbar-item.active {
        color: var(--accent);
    }
}

@media (max-width: 400px) {

    .hero-title {
        font-size: 28px;
    }

    .logo-text {
        display: none;
    }
}

/* ---- Ландшафтная ориентация телефона ---- */

@media (max-height: 500px) {
    :root {
        --header-height: 48px;
    }

    .header-inner {
        padding: 0 12px;
        gap: 10px;
    }

    .logo {
        min-width: 0;
        margin: 0 auto;
        flex: 0 1 auto;
    }

    .logo-mark {
        width: 38px;
        height: 38px;
    }

    .top-nav,
    .search,
    .login-btn {
        display: none;
    }

    .mobile-control-slot {
        display: none;
    }

    .menu-toggle,
    .profile-toggle {
        display: grid;
    }

    .header-actions {
        margin-left: 0;
        gap: 8px;
    }

    .mobile-controls-section {
        display: block;
        margin-bottom: 10px;
        padding: 12px;
        border: 1px solid var(--border-light);
        border-radius: var(--radius);
        background: var(--surface);
    }

    .mobile-controls {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 8px;
    }

    .mobile-controls #gameWrap {
        order: -1;
        flex: 1 0 100%;
    }

    .mobile-controls .game-toggle {
        width: 100%;
        justify-content: space-between;
    }

    .mobile-controls .game-panel {
        left: 0;
        right: auto;
        width: 100%;
        box-sizing: border-box;
    }

    .mobile-controls .notif-panel {
        position: fixed;
        top: 120px;
        right: 12px;
        left: 12px;
        width: auto;
        max-height: calc(100vh - 150px);
        overflow-y: auto;
    }

    .profile-toggle {
        width: 36px;
        height: 36px;
    }

    /* ---- Layout для ландшафтной ориентации ---- */

    .layout {
        display: block;
        padding-bottom: calc(var(--tabbar-height) + 14px);
    }

    .sidebar {
        position: fixed;
        z-index: 110;
        top: 0;
        left: 0;
        bottom: 0;

        width: 260px;

        padding-top: 14px;

        background: var(--surface);
        border-right: 1px solid var(--border);

        transform: translateX(-100%);
        transition: transform .25s ease;

        overflow-y: auto;
    }

    .sidebar.open {
        transform: translateX(0);
    }

    .sidebar-backdrop.open {
        display: block;

        position: fixed;
        inset: 0;
        z-index: 105;

        background: rgba(0,0,0,.5);
    }

    .main {
        padding: 12px;
    }

    /* ---- Hero для ландшафтной ориентации ---- */

    .hero {
        min-height: 180px;
    }

    .hero-content {
        padding: 20px 16px;
    }

    .hero-title {
        font-size: 30px;
    }

    .hero-dots {
        display: flex;
    }

    .stats-grid {
        grid-template-columns: 1fr;
    }

    /* ---- Карточки разделов для ландшафтной ориентации ---- */

    .forum-card {
        grid-template-columns: 36px minmax(0, 1fr) auto;
        gap: 12px;
        min-height: auto;
        padding: 12px 12px;
    }

    .forum-description,
    .forum-count,
    .forum-last {
        display: none;
    }

    .forum-mobile-meta {
        display: block;
        margin-top: 2px;
    }

    .forum-chevron {
        display: grid;
        place-items: center;
        color: var(--text-muted);
    }

    .forum-chevron svg {
        width: 16px;
        height: 16px;
    }

    /* ---- Список последних тем для ландшафтной ориентации ---- */

    .topic-row {
        grid-template-columns: 28px minmax(0, 1fr) auto;
        gap: 12px;
        padding: 10px 12px;
    }

    .topic-section-col,
    .topic-author-col,
    .topic-num-col,
    .topic-time-col {
        display: none;
    }

    .topic-row-title {
        white-space: normal;
        -webkit-line-clamp: 2;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    .topic-row-sub {
        display: block;
        margin-top: 3px;
    }

    .topic-badge {
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    .topic-row.is-premium .topic-badge {
        background: var(--premium);
    }

    /* ---- Нижний таб-бар для ландшафтной ориентации ---- */

    .tabbar {
        position: fixed;
        z-index: 100;
        left: 0;
        right: 0;
        bottom: 0;

        height: var(--tabbar-height);

        display: flex;
        align-items: stretch;

        background: color-mix(in srgb, var(--header-bg) 96%, transparent);
        border-top: 1px solid var(--border);

        backdrop-filter: blur(14px);
    }

    .tabbar-item {
        flex: 1;

        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 3px;

        color: var(--text-muted);

        font-size: 9px;
        font-weight: 600;
    }

    .tabbar-item svg {
        width: 17px;
        height: 17px;
    }

    .tabbar-item.active {
        color: var(--accent);
    }
}

/* ---- Десктоп (ПК/планшет) — отключаем мобильную верстку только при нормальной высоте экрана ---- */

@media (min-width: 781px) and (min-height: 600px) and (orientation: landscape) {
    :root {
        --header-height: 72px;
    }

    .header-inner {
        padding: 0 28px;
        gap: 32px;
    }

    .logo {
        min-width: 210px;
    }

    .logo-mark {
        width: 56px;
        height: 56px;
    }

    .top-nav,
    .search,
    .login-btn {
        display: flex;
    }

    .mobile-control-slot {
        display: contents;
    }

    .menu-toggle,
    .profile-toggle {
        display: none;
    }

    .header-actions {
        margin-left: auto;
        gap: 10px;
    }

    .mobile-controls-section {
        display: none;
    }

    /* ---- Layout для десктопа ---- */

    .layout {
        width: 100%;
        max-width: 1520px;
        min-height: calc(100vh - var(--header-height));
        margin: 0 auto;
        display: grid;
        grid-template-columns: var(--sidebar-width) minmax(0, 1fr);
    }

    .sidebar {
        padding: 12px 12px 30px;
        display: flex;
        flex-direction: column;
        gap: 0;
        border-right: 1px solid var(--border);
        position: static;
        transform: none;
    }

    .sidebar.open {
        transform: none;
    }

    .sidebar-backdrop {
        display: none !important;
    }

    .main {
        min-width: 0;
        padding: 12px 12px 40px;
    }

    /* ---- Hero для десктопа ---- */

    .hero-title {
        font-size: 48px;
    }

    .hero-dots {
        display: none;
    }

    .stats-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 8px;
    }

    /* ---- Карточки разделов: пятиколоночная сетка из components.css ---- */

    .forum-description,
    .forum-count,
    .forum-last {
        display: block;
    }

    .forum-mobile-meta {
        display: none;
    }

    .forum-chevron {
        display: none;
    }

    /* ---- Последние темы: семиколоночная сетка из components.css ---- */

    .topic-section-col,
    .topic-author-col,
    .topic-time-col {
        display: block;
    }

    .topic-row-title {
        white-space: nowrap;
        -webkit-line-clamp: 1;
        display: inline;
    }

    .topic-row-sub {
        display: none;
    }

    /* ---- Нижний таб-бар скрываем на десктопе ---- */

    .tabbar {
        display: none !important;
    }

    .tabbar-item svg {
        width: 20px;
        height: 20px;
    }
}