/* ============================================================ */
/* mobile.css — Мобильная адаптация (max-width: 768px)          */
/* Подключается ПОСЛЕ style.css и dark-theme.css                */
/* Не трогает десктопную версию — все стили в @media             */
/* ============================================================ */

/* ======================== МОБИЛЬНЫЕ УСТРОЙСТВА ======================== */
@media (max-width: 768px) {
    
    /* === ОБЩИЕ === */
    body {
        overflow-x: hidden !important;
    }
    
    .container {
        padding: 0 16px !important;
        max-width: 100% !important;
    }
    
    /* === ШАПКА === */
    header {
        padding: 6px 0 !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }
    
    header .container {
        padding: 0 8px !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        margin: 0 !important;
    }
    
    .header-content {
        display: flex !important;
        grid-template-columns: unset !important;
        justify-content: flex-start !important;
        align-items: center !important;
        gap: 6px !important;
        padding: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        flex-wrap: nowrap !important;
        overflow: hidden !important;
    }

    /* Бургер */
    .mobile-menu-toggle {
        position: static !important;
        width: auto !important;
        height: auto !important;
        font-size: 13px !important;
        margin: 0 !important;
        padding: 6px 10px !important;
        display: flex !important;
        align-items: center !important;
        gap: 5px !important;
        background: rgba(225, 29, 72, 0.12) !important;
        border: 1px solid rgba(225, 29, 72, 0.3) !important;
        border-radius: 10px !important;
        color: #e11d48 !important;
        font-weight: 600 !important;
        flex-shrink: 0 !important;
    }
    .mobile-menu-toggle i { font-size: 15px !important; }
    .mobile-menu-toggle .menu-label {
        display: inline !important;
        font-size: 13px !important;
        font-weight: 600 !important;
    }
    .menu-label { display: none; }
    body.dark-theme .mobile-menu-toggle {
        background: rgba(225, 29, 72, 0.2) !important;
        border-color: rgba(225, 29, 72, 0.4) !important;
        color: #fb7185 !important;
    }

    /* Левая группа — по левому краю */
    .h-left {
        display: flex !important;
        align-items: center !important;
        gap: 6px !important;
        justify-self: unset !important;
        justify-content: flex-start !important;
        flex: 0 1 auto !important;
        min-width: 0 !important;
    }
    .h-brand { display: none !important; }
    .h-logo { display: none !important; }

    /* Игровое время */
    .h-time { display: flex !important; flex-direction: row !important; gap: 0 !important; }
    .h-t.real { display: none !important; }
    .h-t.game {
        display: flex !important;
        align-items: center !important;
        gap: 3px !important;
        padding: 4px 8px !important;
        border-radius: 8px !important;
        background: rgba(225, 29, 72, 0.1) !important;
        flex-shrink: 0 !important;
    }
    .h-t.game i { font-size: 13px !important; color: #e11d48 !important; opacity: 1 !important; }
    .h-t.game .h-t-v { font-size: 15px !important; font-weight: 700 !important; color: #e11d48 !important; }
    .h-t-label { display: none !important; }
    body.dark-theme .h-t.game { background: rgba(251,113,133,0.15) !important; }
    body.dark-theme .h-t.game i, body.dark-theme .h-t.game .h-t-v { color: #fb7185 !important; }

    /* PRO компактный */
    .pro-banner { padding: 4px 8px !important; border-radius: 8px !important; flex-shrink: 0 !important; }
    .pro-b-line2 { display: none !important; }
    .pro-b-line1 { font-size: 10px !important; white-space: nowrap !important; }
    .pro-days-badge { font-size: 10px !important; padding: 3px 6px !important; flex-shrink: 0 !important; }

    /* Правая группа — скрываем чтобы не занимать место */
    .h-right { display: none !important; }

    .theme-toggle { width: 34px !important; height: 34px !important; font-size: 15px !important; padding: 4px !important; }
    
    /* === РЕКЛАМНЫЕ БЛОКИ === */
    .yandex-ad {
        min-height: 100px !important;
        max-height: 200px !important;
        margin: 8px auto !important;
        border-radius: 8px !important;
        overflow: hidden !important;
    }
    
    .yandex-ad.top {
        margin-top: 8px !important;
        margin-bottom: 12px !important;
    }
    
    /* === HERO СЕКЦИЯ === */
    .hero {
        padding: 40px 0 30px !important;
    }
    
    .hero-logo {
        width: 120px !important;
        height: 120px !important;
    }
    
    .hero h1 {
        font-size: 1.6rem !important;
        line-height: 1.3 !important;
        padding: 0 10px !important;
    }
    
    .hero p {
        font-size: 1rem !important;
        padding: 0 15px !important;
        line-height: 1.5 !important;
    }
    
    /* Время на главной */
    .time-display-main,
    .hero .time-display {
        flex-direction: column !important;
        gap: 8px !important;
    }
    
    .time-card {
        padding: 10px 16px !important;
        font-size: 0.9rem !important;
    }
    
    .time-card .time-val {
        font-size: 1.5rem !important;
    }
    
    /* === КАРТОЧКИ «ВОЗМОЖНОСТИ» === */
    .features {
        padding: 40px 0 !important;
    }
    
    .features h2,
    .section-title {
        font-size: 1.5rem !important;
        padding: 0 10px !important;
    }
    
    .features-grid,
    .feature-grid {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
        padding: 0 4px !important;
    }
    
    .feature-card {
        padding: 20px 16px !important;
        border-radius: 12px !important;
    }
    
    .feature-card h3 {
        font-size: 1.1rem !important;
    }
    
    .feature-card p {
        font-size: 0.9rem !important;
    }
    
    .feature-card i,
    .feature-icon {
        font-size: 2rem !important;
    }
    
    /* === СЕКЦИЯ СООБЩЕСТВА === */
    .community-section,
    .community {
        padding: 40px 0 !important;
    }
    
    .community h2 {
        font-size: 1.5rem !important;
        padding: 0 10px !important;
    }
    
    .community-benefits {
        padding: 0 4px !important;
    }
    
    .community-benefits li,
    .benefit-item {
        padding: 14px 16px !important;
        font-size: 1rem !important;
    }
    
    .platform-buttons,
    .platforms-grid {
        flex-direction: column !important;
        gap: 10px !important;
        padding: 0 4px !important;
    }
    
    .platform-btn,
    .platform-card {
        padding: 16px !important;
        font-size: 1rem !important;
        border-radius: 12px !important;
        width: 100% !important;
    }
    
    /* === СЕКЦИЯ ПЕРСОНАЖА === */
    .character {
        padding: 40px 0 !important;
    }
    
    .character-content {
        gap: 24px !important;
    }
    
    .character-image {
        max-width: 100% !important;
        border-radius: 10px !important;
    }
    
    .character-text h2 {
        font-size: 1.5rem !important;
    }
    
    .character-text p {
        font-size: 1rem !important;
        padding: 0 4px !important;
    }
    
    .highlight {
        padding: 16px !important;
        margin: 16px 4px !important;
    }
    
    /* === СТРИМЫ === */
    .stream-container {
        grid-template-columns: 1fr !important;
    }
    
    .stream-player iframe {
        min-height: 220px !important;
    }
    
    .stream-chat {
        height: 300px !important;
    }
    
    /* === ФУТЕР === */
    footer {
        padding: 30px 0 15px !important;
    }
    
    .footer-content {
        grid-template-columns: 1fr !important;
        gap: 24px !important;
    }
    
    .footer-logo {
        width: 80px !important;
        height: 80px !important;
    }
    
    .footer-column h3 {
        font-size: 1rem !important;
    }
    
    .footer-column ul li a {
        font-size: 0.9rem !important;
        padding: 6px 0 !important;
    }
    
    .copyright {
        font-size: 0.75rem !important;
        padding-top: 16px !important;
    }
    
    /* === FAB КНОПКИ (чат/админ): стили УДАЛЕНЫ 11.07.2026 ===
       Кружки-иконки конфликтовали с кнопкой-меню из pages/template.php (июнь 2026):
       на телефоне кнопки разлетались по экрану без подписей (жалоба Вани 11.07).
       Теперь ЕДИНСТВЕННЫЙ хозяин этих кнопок — pages/template.php. Тут их НЕ стилизуем. */

    .scroll-to-top,
    #scrollToTop {
        bottom: 18px !important;
        right: 14px !important;
        width: 46px !important;
        height: 46px !important;
        min-width: 46px !important;
        max-width: 46px !important;
        padding: 0 !important;
        border-radius: 50% !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        font-size: 18px !important;
        box-sizing: border-box !important;
    }
    
    /* === ПЛАВАЮЩИЙ ВИДЕОПЛЕЕР — КОМПАКТНЫЙ НА МОБИЛЬНОМ === */
    .video-player-container,
    #videoPlayer,
    #miniPlayer {
        max-width: 200px !important;
        left: 8px !important;
        right: auto !important;
        bottom: 8px !important;
        border-radius: 10px !important;
        transform: scale(0.85) !important;
        transform-origin: bottom left !important;
        z-index: 998 !important;
    }
    
    /* Шапка плеера — компактнее */
    .video-player-container .player-header,
    #videoPlayer .player-header {
        padding: 6px 8px !important;
        font-size: 11px !important;
        gap: 4px !important;
    }
    
    .video-player-container .stream-info,
    #videoPlayer .stream-info {
        font-size: 10px !important;
    }
    
    .video-player-container .player-title img,
    #videoPlayer .player-title img {
        width: 16px !important;
        height: 16px !important;
    }
    
    /* Тело плеера */
    .video-player-container .player-body,
    #videoPlayer .player-body {
        padding: 8px !important;
        min-height: auto !important;
    }
    
    .video-player-container .channel-link,
    #videoPlayer .channel-link {
        font-size: 12px !important;
        padding: 8px !important;
    }
    
    /* Футер плеера */
    .video-player-container .player-footer,
    #videoPlayer .player-footer {
        padding: 4px 8px !important;
    }
    
    .video-player-container .platform-switcher-btn,
    #videoPlayer .platform-switcher-btn {
        width: 24px !important;
        height: 24px !important;
    }
    
    .video-player-container .platform-switcher-btn img,
    #videoPlayer .platform-switcher-btn img {
        width: 16px !important;
        height: 16px !important;
    }
    
    /* Кнопка «Смотреть стрим» (красная) — компактнее */
    #showPlayerBtn {
        font-size: 12px !important;
        padding: 8px 14px !important;
        bottom: 8px !important;
        left: 8px !important;
        right: auto !important;
        max-width: 180px !important;
        border-radius: 20px !important;
    }
    
    /* === МОДАЛЬНЫЕ ОКНА — ПОЛНОЭКРАННЫЕ НА МОБИЛЬНОМ === */
    .modal,
    .modal-overlay,
    [class*="modal"][style*="display: block"],
    [class*="modal"][style*="display:block"] {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 100% !important;
        z-index: 10000 !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }
    
    .modal-content {
        width: 95% !important;
        max-width: 95% !important;
        margin: 20px auto !important;
        max-height: calc(100vh - 40px) !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
        border-radius: 12px !important;
    }
    
    .modal-body {
        padding: 16px !important;
        overflow-y: auto !important;
        max-height: calc(100vh - 140px) !important;
    }
    
    .modal-header {
        padding: 12px 16px !important;
        position: sticky !important;
        top: 0 !important;
        z-index: 10 !important;
    }
    
    .modal-header h3 {
        font-size: 1.1rem !important;
    }
    
    /* Поля формы в модалке — компактнее */
    .modal-body .form-group {
        margin-bottom: 12px !important;
    }
    
    .modal-body label {
        font-size: 14px !important;
        margin-bottom: 4px !important;
    }
    
    .modal-body input,
    .modal-body select,
    .modal-body textarea {
        font-size: 16px !important;
        padding: 12px !important;
    }
    
    .modal-body textarea {
        min-height: 80px !important;
        max-height: 120px !important;
    }
    
    .modal-body .submit-btn,
    .modal-body #feedbackSubmitBtn {
        padding: 14px !important;
        font-size: 1rem !important;
        width: 100% !important;
    }
    
    /* Секция «Проверить ответ по коду» — не вылезает за экран */
    .modal-body .form-group,
    .modal-body .check-code,
    .modal-body [class*="check"],
    .modal-body [class*="code"] {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        overflow-x: hidden !important;
    }
    
    .modal-body .form-group input + button,
    .modal-body .form-group input + .btn,
    .modal-body .input-group,
    .modal-body [class*="input-group"] {
        flex-wrap: wrap !important;
        width: 100% !important;
        max-width: 100% !important;
    }
    
    .modal-body .input-group input,
    .modal-body .input-group button,
    .modal-body .form-group .btn {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        margin-top: 8px !important;
    }
    
    /* Точный фикс: поле ввода кода + кнопка «Проверить» */
    #ticketCheckInput {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        display: block !important;
        margin-bottom: 8px !important;
    }
    
    #ticketCheckInput + button,
    #ticketCheckInput ~ button {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        display: block !important;
    }
    
    /* Родительский контейнер поля+кнопки — вертикально */
    #ticketCheckInput:not(:only-child) {
        float: none !important;
    }
    
    *:has(> #ticketCheckInput) {
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
    }
    
    /* Лайтбокс (просмотр фото) — всегда поверх модалок */
    .lightbox,
    #lightbox {
        z-index: 99999 !important;
    }
    
    .lightbox-content {
        z-index: 100000 !important;
    }
    
    /* === ФОРМЫ === */
    .form-group input,
    .form-group select,
    .form-group textarea {
        font-size: 16px !important; /* предотвращает зум iOS */
        padding: 14px !important;
    }
    
    .submit-btn {
        padding: 16px !important;
        font-size: 1.05rem !important;
    }
    
    /* === СТРАНИЦА ТОЧЕК КЛЁВА (points.php) === */
    
    /* Секция «Предложить точку» — компактнее */
    .suggest-section,
    .suggest-point-section,
    [class*="suggest"] {
        padding: 20px 12px !important;
    }
    
    .suggest-section h2,
    .suggest-point-section h2 {
        font-size: 1.3rem !important;
        line-height: 1.3 !important;
    }
    
    .suggest-section p {
        font-size: 0.9rem !important;
    }
    
    .suggest-section .btn,
    .suggest-point-section .btn,
    .suggest-section a[class*="btn"],
    .suggest-point-section a[class*="btn"] {
        font-size: 0.95rem !important;
        padding: 12px 16px !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }
    
    /* Фильтры — компактная сетка */
    .filters,
    .filter-section,
    [class*="filter"] > .container {
        padding: 12px !important;
    }
    
    .filter-group,
    .filters .form-group {
        margin-bottom: 10px !important;
    }
    
    .filter-group label,
    .filters label {
        font-size: 13px !important;
        margin-bottom: 4px !important;
    }
    
    .filter-group select,
    .filter-group input,
    .filters select,
    .filters input {
        padding: 10px !important;
        font-size: 15px !important;
    }
    
    /* Кнопка «Показать избранное» */
    .favorites-btn,
    [class*="favorite"] > button,
    button[class*="favorite"] {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        font-size: 0.95rem !important;
        padding: 12px !important;
    }
    
    /* Карточки точек — компактнее */
    .point-card,
    .fish-card,
    [class*="point-card"] {
        margin-bottom: 16px !important;
        border-radius: 12px !important;
        overflow: hidden !important;
    }
    
    .point-card img,
    .fish-card img,
    [class*="point-card"] img {
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        border-radius: 8px !important;
    }
    
    /* Бейджи на карточках */
    .point-card .badge,
    .point-card [class*="badge"],
    .point-card [class*="tag"] {
        font-size: 12px !important;
        padding: 6px 10px !important;
        word-break: break-word !important;
    }
    
    /* «В избранное» кнопка на карточке */
    .point-card .favorite-btn,
    .point-card button[class*="favorite"],
    .point-card [class*="избранное"] {
        width: 100% !important;
        padding: 10px !important;
        font-size: 14px !important;
    }
    
    /* Пагинация */
    .pagination {
        flex-wrap: wrap !important;
        gap: 4px !important;
        justify-content: center !important;
    }
    
    .pagination a,
    .pagination button,
    .pagination span {
        min-width: 36px !important;
        height: 36px !important;
        font-size: 14px !important;
    }
    
    /* === СТРАНИЦА КАРТ (maps.php) === */
    
    /* Контейнер карты — полная ширина */
    .map-container,
    #map,
    [class*="map-container"] {
        width: 100% !important;
        max-width: 100% !important;
        border-radius: 0 !important;
        min-height: 60vh !important;
    }
    
    /* Контролы карты — вертикальная раскладка */
    .map-controls,
    .map-filters,
    [class*="map-control"] {
        flex-direction: column !important;
        gap: 8px !important;
        padding: 8px !important;
    }
    
    .map-controls select,
    .map-filters select,
    .map-controls input,
    .map-filters input {
        width: 100% !important;
        font-size: 15px !important;
        padding: 10px !important;
        box-sizing: border-box !important;
    }
    
    .map-controls button,
    .map-controls .btn,
    .map-filters button,
    .map-filters .btn {
        width: 100% !important;
        padding: 10px !important;
        font-size: 14px !important;
        box-sizing: border-box !important;
    }
    
    /* Зум-контролы карты — вверху справа, крупнее */
    .map-zoom-controls,
    #map-zoom-controls {
        position: absolute !important;
        top: 10px !important;
        right: 10px !important;
        bottom: auto !important;
        left: auto !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 4px !important;
        z-index: 500 !important;
    }
    
    .map-zoom-controls .zoom-btn,
    #map-zoom-controls .zoom-btn {
        width: 40px !important;
        height: 40px !important;
        font-size: 20px !important;
        border-radius: 8px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
    
    .map-zoom-controls .zoom-level,
    #map-zoom-controls .zoom-level {
        font-size: 12px !important;
        text-align: center !important;
    }
    
    /* Leaflet zoom — тоже наверх */
    .leaflet-control-zoom {
        margin-top: 10px !important;
        margin-left: 10px !important;
    }
    
    .leaflet-control-zoom a {
        width: 36px !important;
        height: 36px !important;
        line-height: 36px !important;
        font-size: 18px !important;
    }
    
    /* Список точек под картой */
    .points-list,
    .map-points,
    [class*="point-list"],
    [class*="my-points"] {
        padding: 8px !important;
    }
    
    .points-list li,
    .map-points li,
    .point-list-item {
        padding: 10px 8px !important;
        font-size: 14px !important;
    }
    
    /* Экспорт кнопка */
    .export-btn,
    [class*="export"] button {
        width: 100% !important;
        box-sizing: border-box !important;
    }
    
    /* Popup «Добавить точку» — всегда по центру на мобильном */
    .add-point-popup,
    .search-result-popup.add-point-popup {
        left: 50% !important;
        top: 50% !important;
        transform: translate(-50%, -50%) !important;
        max-width: 90vw !important;
        z-index: 9999 !important;
    }
    
    /* Координатная точка, курсор и координаты — скрыть на мобильном */
    .add-point-highlight,
    .cursor-dot,
    #cursor-dot,
    #coordinates-display,
    .coordinates-display {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
    }
    
    /* === СТРАНИЦА РЕКОРДОВ (RF4Records) === */
    
    /* Все контейнеры — полная ширина */
    .filters-bar,
    .filters-inner,
    .stats-section,
    .table-section,
    .header-inner {
        width: 100% !important;
        max-width: 100vw !important;
        padding-left: 8px !important;
        padding-right: 8px !important;
        box-sizing: border-box !important;
    }
    
    /* Фильтры — вертикальная раскладка */
    .filters-inner {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 8px !important;
    }
    
    .filter-row {
        flex-direction: column !important;
        gap: 8px !important;
        align-items: stretch !important;
    }
    
    .filter-row-period {
        flex-direction: row !important;
        flex-wrap: wrap !important;
        gap: 6px !important;
    }
    
    /* Period кнопки — wrap на мобильном */
    .period-row {
        flex-wrap: wrap !important;
    }
    
    .period-btns {
        flex-wrap: wrap !important;
        gap: 4px !important;
    }
    
    .period-btn {
        padding: 5px 8px !important;
        font-size: 11px !important;
    }
    
    /* Группы фильтров — полная ширина */
    .filter-group {
        width: 100% !important;
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 3px !important;
    }
    
    /* Smart select — полная ширина */
    .smart-select,
    #ss-location,
    #ss-fish,
    #ss-region,
    #ss-bait,
    #ss-tackle,
    #ss-player {
        width: 100% !important;
        min-width: unset !important;
    }
    
    .ss-input {
        width: 100% !important;
        min-width: unset !important;
    }
    
    /* Даты и вес — плашки на всю ширину */
    .filter-range {
        width: 100% !important;
        flex-wrap: wrap !important;
    }
    
    .filter-date {
        width: calc(45% - 8px) !important;
        min-width: 110px !important;
    }
    
    .filter-num {
        width: calc(40% - 8px) !important;
        min-width: 60px !important;
    }
    
    /* Трофеи — wrap */  
    .trophy-toggles {
        flex-wrap: wrap !important;
        gap: 6px !important;
        justify-content: center !important;
    }
    
    .trophy-toggle {
        padding: 8px 14px !important;
        font-size: 12px !important;
    }
    
    /* Сброс фильтров */
    .filter-reset {
        width: 100% !important;
        text-align: center !important;
        margin-left: 0 !important;
    }
    
    /* Статистика — 1 колонка */
    .stats-section {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }
    
    .stat-card {
        padding: 12px !important;
    }
    
    .stat-body {
        max-height: 300px !important;
    }
    
    /* Таблица — горизонтальный скролл */
    .table-section {
        overflow-x: hidden !important;
    }
    
    .table-wrap {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }
    
    .table-wrap table {
        min-width: 600px !important;
    }
    
    .table-wrap th,
    .table-wrap td {
        padding: 6px 8px !important;
        font-size: 12px !important;
    }
    
    /* Хедер — мобильная адаптация */
    .header-title h1 {
        font-size: 18px !important;
    }
    
    .header-title .subtitle {
        display: none !important;
    }
    
    .header-nav {
        display: none !important;
    }
    
    /* Бургер для Bait Sandwich checkbox */
    .bait-sandwich-label {
        font-size: 11px !important;
    }
}

/* ======================== МАЛЕНЬКИЕ ТЕЛЕФОНЫ ======================== */
@media (max-width: 400px) {
    
    .hero h1 {
        font-size: 1.3rem !important;
    }
    
    .hero p {
        font-size: 0.9rem !important;
    }
    
    .hero-logo {
        width: 100px !important;
        height: 100px !important;
    }
    
    .feature-card {
        padding: 16px 12px !important;
    }
    
    .time-item {
        padding: 3px 6px !important;
        font-size: 10px !important;
    }
    
    .time-item .time-value {
        font-size: 12px !important;
    }
    
    /* FAB кнопки (чат/админ): правила удалены 11.07.2026 — хозяин pages/template.php */
    
    .scroll-to-top,
    #scrollToTop {
        width: 42px !important;
        height: 42px !important;
    }
}

/* ======================== СТРАНИЦЫ: БАЗА ЗНАНИЙ, ВИДЕО, КАФЕ, СТРИМЫ ======================== */
@media (max-width: 768px) {

    /* === БАЗА ЗНАНИЙ === */
    .knowledge-grid {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
        padding: 0 !important;
    }
    .knowledge-card {
        padding: 14px !important;
    }
    .knowledge-card .card-icon {
        width: 40px !important;
        height: 40px !important;
        font-size: 20px !important;
    }
    .knowledge-card .card-title {
        font-size: 14px !important;
    }
    .knowledge-card .card-desc {
        font-size: 12px !important;
    }
    .knowledge-header {
        font-size: 18px !important;
        padding: 12px 0 !important;
    }

    /* === ВИДЕО И ГАЙДЫ === */
    .search-container,
    .search-section {
        padding: 10px !important;
    }
    .search-input,
    .search-box {
        width: 100% !important;
        font-size: 14px !important;
    }
    .video-grid {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }
    .search-results-container {
        padding: 0 8px !important;
    }

    /* === КАФЕ РР4 === */
    .cafe-page-container {
        flex-direction: column !important;
        gap: 12px !important;
    }
    .cafe-page-container .sidebar {
        width: 100% !important;
        max-width: 100% !important;
        min-width: unset !important;
        order: -1 !important;
    }
    .cafe-page-container .main,
    .cafe-content {
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 !important;
    }
    .wb-list {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 6px !important;
    }
    .wb-item {
        font-size: 12px !important;
        padding: 6px 10px !important;
    }
    .cards-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 8px !important;
    }
    .cards-grid .card {
        width: 100% !important;
    }
    .cards-grid .card-img img {
        width: 100% !important;
        height: 80px !important;
        object-fit: cover !important;
    }
    .cards-grid .card-body {
        padding: 6px 8px !important;
    }
    .cards-grid .fish-name {
        font-size: 12px !important;
        line-height: 1.2 !important;
        margin-bottom: 4px !important;
    }
    .cards-grid .card-price {
        font-size: 11px !important;
    }
    .cards-grid .card-details {
        font-size: 10px !important;
        gap: 2px !important;
    }
    .cafe-page-container .layout {
        flex-direction: column !important;
    }

    /* === НАШИ СТРИМЫ === */
    .platforms-grid {
        grid-template-columns: 1fr !important;
        gap: 10px !important;
    }
    .platform-card {
        padding: 14px !important;
    }
    .platform-links {
        flex-wrap: wrap !important;
        gap: 8px !important;
    }
    .platform-link,
    .platform-btn {
        font-size: 13px !important;
        padding: 8px 14px !important;
    }
    .roulettes-grid {
        grid-template-columns: 1fr !important;
        gap: 10px !important;
    }
    .roulette-card {
        padding: 12px !important;
    }
    .quests-grid {
        grid-template-columns: 1fr !important;
        gap: 10px !important;
    }
    .quest-card {
        padding: 12px !important;
    }
    .streams-content {
        padding: 0 8px !important;
    }
    .main-banner,
    .giveaway-banner {
        padding: 16px !important;
        font-size: 14px !important;
    }
    .vani-header {
        font-size: 16px !important;
    }
    .final-cta {
        padding: 16px !important;
        font-size: 14px !important;
    }
}

/* ======================== БАЗА ЗНАНИЙ — ПОДСТРАНИЦЫ ======================== */
@media (max-width: 768px) {

    /* === ТАБЛИЦЫ — горизонтальная прокрутка и компакт === */
    .table-wrapper {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        margin: 0 -8px !important;
        padding: 0 8px !important;
    }
    .levels-table,
    .big-table,
    table {
        font-size: 12px !important;
    }
    .levels-table th,
    .levels-table td,
    .big-table th,
    .big-table td {
        padding: 6px 8px !important;
        white-space: nowrap !important;
    }
    .levels-table .level-number {
        font-size: 13px !important;
    }

    /* === ФИЛЬТРЫ === */
    .filter-row {
        flex-direction: column !important;
        gap: 8px !important;
    }
    .filter-group {
        width: 100% !important;
    }
    .filter-select,
    .filter-input {
        width: 100% !important;
        font-size: 14px !important;
    }
    .filter-label {
        font-size: 12px !important;
    }
    .active-filters {
        flex-wrap: wrap !important;
        gap: 4px !important;
    }

    /* === КАЛЬКУЛЯТОР ИЗНОСА === */
    .calculator-page {
        padding: 0 8px !important;
    }
    .calculators-grid {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }
    .calc-block {
        padding: 12px !important;
    }
    .block-header {
        font-size: 14px !important;
    }
    .input-row {
        flex-direction: column !important;
        gap: 6px !important;
    }
    .combobox-wrap {
        width: 100% !important;
    }
    .combobox-input {
        font-size: 14px !important;
    }
    .result-container {
        padding: 8px !important;
    }
    .build-summary-grid {
        grid-template-columns: 1fr !important;
        gap: 8px !important;
    }

    /* === СРАВНЕНИЕ КАТУШЕК/УДОЧЕК === */
    .comparison-slots,
    .slots-container {
        grid-template-columns: 1fr !important;
        gap: 10px !important;
    }
    .reel-slot,
    .rod-slot,
    .slot {
        width: 100% !important;
    }

    /* === ИНФОРМАЦИОННЫЕ БЛОКИ === */
    .info-box {
        padding: 10px 12px !important;
        font-size: 13px !important;
    }
    .page-intro {
        font-size: 14px !important;
        padding: 10px !important;
    }

    /* === КНОПКА НАЗАД === */
    .back-button,
    .back-link {
        font-size: 13px !important;
        padding: 6px 12px !important;
    }

    /* === ОБЩИЙ КОНТЕНТ KB СТРАНИЦ === */
    .levels-xp-page,
    .calculator-page {
        padding: 0 4px !important;
    }
    
    /* Мини-плеер на KB страницах компакт */
    .video-player-container,
    #videoPlayer,
    #miniPlayer {
        max-width: 160px !important;
        transform: scale(0.75) !important;
    }
    
    /* === СТРИМ КНОПКА — не перекрывать контент === */
    .stream-widget,
    .stream-notification,
    [class*="stream-overlay"],
    .stream-btn-float {
        bottom: 80px !important;
        left: 8px !important;
        right: auto !important;
        max-width: 180px !important;
        font-size: 11px !important;
        padding: 6px 10px !important;
        z-index: 999 !important;
        transform: scale(0.85) !important;
        transform-origin: bottom left !important;
    }

    /* FAB кнопки — компактнее и не закрывать контент */
    .fab-container,
    .floating-buttons {
        bottom: 12px !important;
        right: 8px !important;
        gap: 6px !important;
    }
    .fab-container .fab-btn,
    .floating-buttons a,
    .floating-buttons button {
        width: 40px !important;
        height: 40px !important;
        font-size: 16px !important;
    }

    /* === BAIT-SKILL — таблица компактнее === */
    .skill-table,
    .bait-table {
        font-size: 11px !important;
    }
    .skill-table th,
    .skill-table td,
    .bait-table th,
    .bait-table td {
        padding: 4px 6px !important;
        white-space: nowrap !important;
    }

    /* === LURE-CRAFT — сетка карточек === */
    .lure-grid,
    .craft-grid,
    .recipe-grid {
        grid-template-columns: 1fr !important;
        gap: 10px !important;
    }
    .lure-card,
    .craft-card,
    .recipe-card {
        width: 100% !important;
    }
}