/**
 * SaveTool — 窄屏响应式（统一桌面布局，侧栏抽屉 + 内容自适应）
 * 由 ui-modern.js 设置 html.is-compact / html.is-mobile
 */
:root {
    --compact-sidebar-width: min(260px, 86vw);
    --modal-width-sm: 440px;
    --modal-width-md: 520px;
    --modal-width-lg: 680px;
    --modal-viewport-pad: 32px;
}

@media (max-width: 1100px) {
    html.is-compact,
    html.is-mobile {
        overflow-x: hidden;
    }

    html.is-compact .mobile-menu-btn,
    html.is-mobile .mobile-menu-btn {
        display: inline-flex !important;
    }

    html.is-compact .sidebar,
    html.is-mobile .sidebar {
        width: var(--compact-sidebar-width);
        min-width: 0;
        transform: translateX(-105%);
        transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1);
        box-shadow: 8px 0 32px rgba(15, 23, 42, 0.18);
        z-index: 210;
    }

    html.is-compact body.sidebar-open .sidebar,
    html.is-mobile body.sidebar-open .sidebar {
        transform: translateX(0);
    }

    html.is-compact .sidebar-backdrop,
    html.is-mobile .sidebar-backdrop {
        display: block;
    }

    html.is-compact body.sidebar-open .sidebar-backdrop,
    html.is-mobile body.sidebar-open .sidebar-backdrop {
        opacity: 1;
        visibility: visible;
    }

    html.is-compact .main-wrapper,
    html.is-mobile .main-wrapper {
        margin-left: 0 !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
    }

    html.is-compact .container.app-shell[style*="block"],
    html.is-compact .container.app-shell[style*="flex"],
    html.is-mobile .container.app-shell[style*="block"],
    html.is-mobile .container.app-shell[style*="flex"] {
        flex-direction: column !important;
        min-height: 100dvh;
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: hidden;
    }

    html.is-compact .topbar,
    html.is-mobile .topbar {
        padding: 8px 12px;
        gap: 8px;
        height: auto;
        min-height: var(--topbar-height);
        flex-wrap: wrap;
    }

    html.is-compact .topbar-left,
    html.is-mobile .topbar-left {
        flex: 1 1 auto;
        min-width: 0;
        max-width: 100%;
    }

    html.is-compact .topbar-right,
    html.is-mobile .topbar-right {
        flex: 0 1 auto;
        min-width: 0;
        gap: 6px;
        margin-left: auto;
    }

    html.is-compact .topbar-left #loginStatusText,
    html.is-mobile .topbar-left #loginStatusText {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        max-width: min(120px, 28vw);
        font-size: 0.8125rem;
    }

    html.is-compact .topbar-meta,
    html.is-mobile .topbar-meta {
        font-size: 0.75rem;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: min(140px, 32vw);
    }

    html.is-compact .topbar-sep,
    html.is-mobile .topbar-sep {
        display: none;
    }

    html.is-compact .topbar-game,
    html.is-mobile .topbar-game {
        max-width: min(180px, 42vw);
        font-size: 0.75rem;
        padding: 5px 10px;
    }

    html.is-compact .app-shell .content,
    html.is-mobile .app-shell .content {
        padding: 12px !important;
        gap: 12px !important;
        min-height: auto !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box;
    }

    html.is-compact .tab-content.active,
    html.is-mobile .tab-content.active {
        display: flex !important;
        flex-direction: column !important;
        flex-wrap: nowrap !important;
        align-items: stretch !important;
        gap: 12px !important;
        width: 100% !important;
        min-width: 0 !important;
        min-height: auto !important;
        flex: none !important;
    }

    html.is-compact .left-panel,
    html.is-compact .right-panel,
    html.is-compact .ranking-side-panel,
    html.is-mobile .left-panel,
    html.is-mobile .right-panel,
    html.is-mobile .ranking-side-panel,
    html.is-compact #archive-tab .left-panel,
    html.is-compact #archive-tab .right-panel,
    html.is-mobile #archive-tab .left-panel,
    html.is-mobile #archive-tab .right-panel {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        flex: none !important;
        gap: 12px !important;
    }

    html.is-compact .section,
    html.is-mobile .section {
        width: 100% !important;
        min-width: 0 !important;
        flex: none !important;
        box-sizing: border-box;
    }

    html.is-compact .input-group label,
    html.is-mobile .input-group label {
        flex-wrap: wrap;
        word-break: break-word;
        white-space: normal;
        line-height: 1.45;
    }

    html.is-compact input[type="text"],
    html.is-compact input[type="password"],
    html.is-compact input:not([type]),
    html.is-compact select,
    html.is-compact textarea,
    html.is-mobile input[type="text"],
    html.is-mobile input[type="password"],
    html.is-mobile input:not([type]),
    html.is-mobile select,
    html.is-mobile textarea {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box;
    }

    html.is-compact .btn-group,
    html.is-mobile .btn-group {
        flex-wrap: wrap !important;
        gap: 8px !important;
    }

    html.is-compact .btn-group .btn,
    html.is-mobile .btn-group .btn {
        flex: 1 1 auto;
        min-width: min(100%, 120px);
    }

    html.is-compact .stats-grid,
    html.is-mobile .stats-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    html.is-compact .save-list-container,
    html.is-mobile .save-list-container {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        max-width: 100%;
    }

    html.is-compact .save-table,
    html.is-mobile .save-table {
        min-width: 520px;
    }

    html.is-compact .ranking-table-wrap,
    html.is-mobile .ranking-table-wrap {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* 弹窗：窄屏也保持小弹窗居中，不全屏拉伸 */
    html.is-compact .modal-overlay,
    html.is-mobile .modal-overlay {
        align-items: center !important;
        justify-content: center !important;
        padding: 16px !important;
    }

    html.is-compact .modal-content,
    html.is-mobile .modal-content {
        width: min(var(--modal-width-sm), calc(100vw - var(--modal-viewport-pad))) !important;
        max-width: min(var(--modal-width-sm), calc(100vw - var(--modal-viewport-pad))) !important;
        max-height: min(85dvh, 90vh) !important;
        margin: 0 !important;
        border-radius: var(--radius-lg, 12px) !important;
    }

    html.is-compact #exportModal .modal-content,
    html.is-mobile #exportModal .modal-content,
    html.is-compact #workshopEditModal .modal-content,
    html.is-mobile #workshopEditModal .modal-content,
    html.is-compact .workshop-upload-modal,
    html.is-mobile .workshop-upload-modal,
    html.is-compact .workshop-detail-modal,
    html.is-mobile .workshop-detail-modal {
        width: min(var(--modal-width-md), calc(100vw - var(--modal-viewport-pad))) !important;
        max-width: min(var(--modal-width-md), calc(100vw - var(--modal-viewport-pad))) !important;
    }

    html.is-compact #rankingDetailModal .modal-content,
    html.is-mobile #rankingDetailModal .modal-content {
        width: min(var(--modal-width-lg), calc(100vw - var(--modal-viewport-pad))) !important;
        max-width: min(var(--modal-width-lg), calc(100vw - var(--modal-viewport-pad))) !important;
    }

    html.is-compact .modal-footer,
    html.is-mobile .modal-footer {
        flex-direction: row !important;
        flex-wrap: wrap !important;
    }

    html.is-compact .modal-footer .btn,
    html.is-mobile .modal-footer .btn {
        width: auto !important;
    }

    html.is-compact .mobile-bottom-nav,
    html.is-mobile .mobile-bottom-nav {
        display: none !important;
    }
}

@media (max-width: 640px) {
    html.is-compact .topbar-meta,
    html.is-mobile .topbar-meta,
    html.is-compact .topbar-game,
    html.is-mobile .topbar-game {
        display: none !important;
    }
}

@media (min-width: 1101px) {
    html.is-desktop .mobile-bottom-nav {
        display: none !important;
    }
}