@media (max-width: 768px) {

    .settings-overlay.active {
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 100% !important;
        overflow: hidden !important;
        background: rgba(4, 6, 18, 0.97) !important;
        backdrop-filter: blur(8px) !important;
        -webkit-backdrop-filter: blur(8px) !important;
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        grid-template-rows: auto 1fr 52px !important;
        flex-direction: unset !important;
        flex-wrap: unset !important;
        z-index: 100000 !important;
    }

    .settings-overlay .menu-header {
        grid-row: 1 !important;
        grid-column: 1 / -1 !important;
        position: relative !important;
        top: unset !important;
        z-index: 10 !important;
        padding: 10px 8px 8px 8px !important;
        gap: 10px !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        overflow-y: hidden;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
        background: rgba(4, 6, 18, 0.99) !important;
        border-bottom: 2px solid rgba(3, 238, 255, 0.3) !important;
        box-shadow: 0 2px 20px rgba(0, 0, 0, 0.5);
        margin-bottom: 0 !important;
        display: flex !important;
        align-items: center !important;
    }

    .settings-overlay .menu-header::-webkit-scrollbar {
        display: none !important;
    }

    .menu-nav-btn {
        display: none !important;
    }

    .settings-menu-tab {
        font-size: 0.68rem !important;
        letter-spacing: 1px !important;
        white-space: nowrap !important;
        flex-shrink: 0 !important;
        color: rgba(255, 255, 255, 0.55) !important;
        padding-bottom: 6px !important;
        padding-top: 2px;
    }

    .settings-menu-tab:hover {
        color: rgba(255, 255, 255, 0.85) !important;
    }

    .settings-menu-tab.active {
        color: var(--accent-cyan) !important;
    }

    .settings-menu-tab.active::after {
        bottom: -8px !important;
        height: 3px !important;
    }

    .settings-menu-body {
        grid-row: 2 !important;
        grid-column: 1 / -1 !important;
        display: block !important;
        flex-direction: unset !important;
        gap: 0 !important;
        padding: 14px 10px 20px !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        min-height: 0 !important;
    }

    .menu-footer {
        display: none !important;
    }

    .settings-info-pane {
        display: none !important;
    }

    .settings-list-pane {
        flex: none !important;
        width: 100% !important;
        padding-right: 0 !important;
        overflow-y: visible;
    }

    .settings-item {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 8px !important;
        padding: 10px 12px !important;
    }

    .settings-item:has(.settings-switch):not(:has(input[type="range"])),
    .settings-item:has(.advanced-chevron-btn) {
        flex-direction: row !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 0 !important;
    }

    .settings-item:has(.settings-switch):not(:has(input[type="range"])) .settings-control,
    .settings-item:has(.advanced-chevron-btn) .settings-control {
        width: auto !important;
        min-width: unset !important;
        flex-shrink: 0;
    }

    [data-info].selected {
        transform: none !important;
    }

    .settings-control {
        min-width: unset !important;
        width: 100% !important;
        justify-content: space-between;
        gap: 8px;
    }

    .settings-control input[type="range"],
    #rendering-mode-slider,
    #graphics-preset-slider {
        width: 100% !important;
        flex: 1;
        min-width: 0;
    }

    .settings-control .value-display {
        min-width: 45px !important;
        font-size: 0.85rem !important;
        white-space: nowrap;
        text-align: right;
    }

    .settings-label {
        font-size: 0.8rem !important;
        letter-spacing: 0.8px !important;
    }

    .sub-item {
        flex-wrap: wrap;
        gap: 6px;
    }

    .sub-label {
        min-width: 80px;
        font-size: 0.68rem;
    }

    .sub-item input[type="range"] {
        flex: 1 1 100px;
        min-width: 0;
    }

    /* ---- Map Info tab: compact image + stacked header ---- */
    .map-brief-preview {
        max-height: 150px !important;
        object-fit: cover !important;
        border-radius: 8px !important;
        margin-bottom: 8px !important;
    }

    #brief-map-name {
        font-size: 1.1rem !important;
    }

    /* stack map title + steam button vertically */
    #tab-brief>div {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 8px !important;
        margin-top: 8px !important;
    }

    .steam-btn {
        width: auto !important;
        padding: 8px 14px !important;
        font-size: 0.78rem !important;
    }

    /* ---- Close & fullscreen: Grid row 3, one column each ---- */
    .settings-overlay .close-btn,
    .settings-overlay .fullscreen-settings-btn {
        grid-row: 3 !important;
        position: static !important;
        top: auto !important;
        bottom: auto !important;
        order: unset !important;
        flex-shrink: unset !important;
        width: 100% !important;
        /* fills its grid cell (1fr each) */
        height: 52px !important;
        padding: 0 !important;
        z-index: 20 !important;
        border-radius: 0 !important;
        background: rgba(4, 6, 18, 0.97) !important;
        border-top: 1px solid rgba(3, 238, 255, 0.2) !important;
        opacity: 1 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 8px !important;
        font-size: 0.72rem !important;
        font-weight: 700 !important;
        letter-spacing: 1px !important;
        text-transform: uppercase !important;
        color: rgba(255, 255, 255, 0.55) !important;
        transition: background 0.2s, color 0.2s !important;
    }

    .settings-overlay .fullscreen-settings-btn {
        grid-column: 1 !important;
        border-right: 1px solid rgba(3, 238, 255, 0.15) !important;
        margin-left: 0 !important;
    }

    .settings-overlay .close-btn {
        grid-column: 2 !important;
        margin-right: 0 !important;
    }


    .settings-overlay .close-btn:active,
    .settings-overlay .fullscreen-settings-btn:active,
    .settings-overlay .close-btn:hover,
    .settings-overlay .fullscreen-settings-btn:hover {
        background: rgba(3, 238, 255, 0.08) !important;
        color: var(--accent-cyan) !important;
        transform: none !important;
    }

    .settings-overlay .close-btn:hover {
        transform: none !important;
    }

    /* ---- Text labels for bottom bar buttons ---- */
    .settings-overlay .fullscreen-settings-btn::after {
        content: 'Fullscreen';
        font-size: 0.68rem;
        font-weight: 700;
        letter-spacing: 1px;
        text-transform: uppercase;
        color: inherit;
    }

    .settings-overlay .close-btn::after {
        content: 'Zamknij';
        font-size: 0.68rem;
        font-weight: 700;
        letter-spacing: 1px;
        text-transform: uppercase;
        color: inherit;
    }

    /* ---- Shrink SVG icons inside bottom bar buttons ---- */
    .settings-overlay .close-btn svg,
    .settings-overlay .fullscreen-settings-btn svg {
        width: 18px !important;
        height: 18px !important;
    }

    /* ---- Stats: compact ---- */
    .brief-stats {
        gap: 6px;
        margin-top: 10px;
    }

    .brief-stat-item {
        padding: 6px 0;
    }

    .brief-stat-label {
        font-size: 0.65rem;
    }

    .brief-stat-value {
        font-size: 0.85rem;
    }

    /* ---- Section headers: smaller ---- */
    .settings-section-header {
        font-size: 0.65rem;
        letter-spacing: 2px;
        padding: 6px 0;
    }

    /* ---- Map Creators: mobile adjustments ---- */
    .map-creators-container {
        top: 20px !important;
        left: 20px !important;
        gap: 8px !important;
        flex-direction: column !important;
        /* stack creators on mobile if needed, or just keep small */
    }

    .map-creator-item {
        padding: 4px 12px 4px 4px !important;
        gap: 8px !important;
    }

    .map-creator-item img {
        width: 32px !important;
        height: 32px !important;
    }

    .map-creator-item .creator-name {
        font-size: 0.75rem !important;
    }

    .map-creator-item .creator-role {
        font-size: 0.55rem !important;
        margin-top: 0 !important;
    }
}

/* ---- Landscape phone: side-by-side tabs + content ---- */
@media (max-width: 900px) and (orientation: landscape) and (max-height: 480px) {
    .settings-overlay.active {
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        overflow: hidden !important;
    }

    .settings-overlay .menu-header {
        position: relative !important;
        flex-direction: column !important;
        width: 130px !important;
        flex-shrink: 0 !important;
        height: 100% !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        padding: 8px 6px 90px 6px !important;
        /* Extra bottom padding for buttons */
        gap: 6px !important;
        border-bottom: none !important;
        border-right: 2px solid rgba(3, 238, 255, 0.2) !important;
        align-items: flex-start !important;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }

    .settings-overlay .menu-header::-webkit-scrollbar {
        display: none !important;
    }

    /* Hide Navigation Buttons & Footer hints (Legend) */
    .menu-nav-btn,
    .menu-footer {
        display: none !important;
    }

    /* Hide Info Pane (Glass) as it's too big for landscape */
    .settings-info-pane {
        display: none !important;
    }

    .settings-menu-tab {
        font-size: 0.58rem !important;
        padding: 4px 0 !important;
    }

    .settings-menu-tab.active::after {
        bottom: 0 !important;
        left: auto !important;
        right: -8px !important;
        top: 0 !important;
        width: 3px !important;
        height: 100% !important;
    }

    .settings-menu-body {
        flex: 1 !important;
        overflow-y: auto !important;
        padding: 8px !important;
    }

    .settings-item {
        flex-direction: row !important;
        align-items: center !important;
        padding: 7px 10px !important;
    }

    .settings-label {
        font-size: 0.75rem !important;
        flex: 0 0 160px !important;
        margin-right: 15px;
    }

    .settings-list-pane {
        width: 100% !important;
        padding-right: 0 !important;
    }

    /* ---- In landscape, revert buttons back to small corner icons ---- */
    .settings-overlay .close-btn,
    .settings-overlay .fullscreen-settings-btn {
        position: absolute !important;
        left: 8px !important;
        right: auto !important;
        width: 114px !important;
        height: 34px !important;
        background: rgba(255, 255, 255, 0.05) !important;
        border-top: none !important;
        border-right: none !important;
        border-radius: 6px !important;
        border: 1px solid rgba(3, 238, 255, 0.15) !important;
        opacity: 1 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important;
        padding-left: 10px !important;
        gap: 8px !important;
    }

    .settings-overlay .fullscreen-settings-btn {
        bottom: 48px !important;
        top: auto !important;
    }

    .settings-overlay .close-btn {
        bottom: 10px !important;
        top: auto !important;
    }

    .settings-overlay .btn-label {
        display: block !important;
        font-size: 0.65rem !important;
        font-weight: 700 !important;
        letter-spacing: 0.8px !important;
        text-transform: uppercase !important;
        color: rgba(255, 255, 255, 0.8) !important;
        pointer-events: none;
    }



    .settings-overlay .close-btn svg,
    .settings-overlay .fullscreen-settings-btn svg {
        width: 14px !important;
        height: 14px !important;
    }
}