/*
 * 全站手机浏览器响应式适配层
 * 只在窄屏/触控设备上覆盖页面内联样式，不影响 Android 原生端和桌面网页。
 */

html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    overflow-wrap: anywhere;
}

body {
    max-width: 100%;
    padding-bottom: env(safe-area-inset-bottom);
}

/*
 * 管理后台是功能界面，可读性必须独立于 70 套主题色。
 * 这些规则在页面主题样式之后加载，并使用明确的高对比度颜色。
 */
.admin-sidebar {
    background: linear-gradient(180deg, #172033 0%, #0b1220 100%) !important;
    color: #ffffff !important;
}

.admin-sidebar .sidebar-header,
.admin-sidebar .sidebar-header h2,
.admin-sidebar .sidebar-header i {
    color: #ffffff !important;
}

.admin-sidebar .nav-item {
    color: #f8fafc !important;
    background-color: transparent;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.65);
    opacity: 1 !important;
}

.admin-sidebar .nav-item i {
    color: currentColor !important;
    opacity: 1 !important;
}

.admin-sidebar .nav-item:hover {
    color: #ffffff !important;
    background: rgba(255, 255, 255, 0.13) !important;
}

.admin-sidebar .nav-item.active {
    color: #ffffff !important;
    background: linear-gradient(90deg, #4f46e5 0%, #3730a3 100%) !important;
    border-left-color: #fbbf24 !important;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12);
}

.admin-sidebar .nav-item:focus-visible {
    color: #ffffff !important;
    outline: 3px solid #fbbf24 !important;
    outline-offset: -3px;
    background: #1e3a8a !important;
}

.admin-sidebar .sidebar-footer,
.admin-sidebar .sidebar-footer * {
    color: #ffffff;
}

img,
video,
svg {
    max-width: 100%;
}

@media (hover: none) and (pointer: coarse) {
    button,
    [role="button"],
    input[type="button"],
    input[type="submit"],
    input[type="reset"],
    a.btn,
    a.button,
    .nav-link,
    .tab-btn {
        min-height: 44px;
        touch-action: manipulation;
    }

    input,
    select,
    textarea {
        font-size: 16px !important;
    }
}

@media (max-width: 768px) {
    :root {
        --mobile-page-gap: 12px;
        --mobile-card-gap: 14px;
    }

    html,
    body {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        overflow-x: hidden;
    }

    body {
        margin: 0;
        padding-left: max(var(--mobile-page-gap), env(safe-area-inset-left));
        padding-right: max(var(--mobile-page-gap), env(safe-area-inset-right));
        padding-bottom: max(var(--mobile-page-gap), env(safe-area-inset-bottom));
    }

    *,
    *::before,
    *::after {
        min-width: 0;
    }

    /* 公共页面容器 */
    .container,
    .main-content,
    .page-container,
    .content-container,
    .wrapper,
    .wrap {
        width: 100%;
        max-width: 100%;
        margin-left: auto;
        margin-right: auto;
        padding-left: 0;
        padding-right: 0;
    }

    /* 统一导航：单行横向滑动，避免十多个入口挤成多行。 */
    .top-nav,
    .nav-links,
    .tabs,
    .tab-nav {
        max-width: 100%;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        overscroll-behavior-inline: contain;
    }

    .top-nav::-webkit-scrollbar,
    .nav-links::-webkit-scrollbar,
    .tabs::-webkit-scrollbar,
    .tab-nav::-webkit-scrollbar {
        display: none;
    }

    .top-nav {
        display: flex !important;
        flex-flow: row nowrap !important;
        align-items: center;
        justify-content: flex-start;
        gap: 6px;
        padding: 8px;
        margin-bottom: 12px;
        border-radius: 12px;
    }

    .top-nav .nav-link,
    .nav-links > a,
    .tabs > *,
    .tab-nav > * {
        flex: 0 0 auto;
        white-space: nowrap;
    }

    .top-nav .room-badge {
        margin-left: 8px;
        flex: 0 0 auto;
    }

    /* 首页头部在手机上分两行，入口仍可左右滑动。 */
    .top-bar {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
        padding-top: max(12px, env(safe-area-inset-top));
    }

    .top-bar .logo {
        align-self: flex-start;
    }

    .top-bar .nav-links {
        width: 100%;
        flex-wrap: nowrap;
        padding-bottom: 4px;
    }

    .hero {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    .hero h1,
    .hero h2,
    .page-header h1 {
        font-size: clamp(1.45rem, 7vw, 2rem) !important;
        line-height: 1.25;
    }

    /* 卡片与网格 */
    .card,
    .panel,
    .section-card,
    .glass-card,
    .rules-card,
    .community-tracker,
    .table-card {
        max-width: 100%;
        border-radius: 14px;
    }

    .card,
    .panel,
    .section-card,
    .glass-card {
        padding: var(--mobile-card-gap);
    }

    .community-grid,
    .duo-grid,
    .analytics-layout,
    .analysis-grid,
    .speed-grid,
    .two-col,
    .teams-grid,
    .players-grid,
    .detail-grid,
    .form-row {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    .stats-grid,
    .stats-bar,
    .stats {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 10px !important;
    }

    .stat-card {
        padding: 13px !important;
    }

    /* 表单和操作区 */
    input,
    select,
    textarea {
        max-width: 100%;
        font-size: 16px !important;
    }

    .controls,
    .toolbar,
    .toolbar-left,
    .button-group,
    .actions,
    .form-actions,
    .search-row,
    .filter-row,
    .volume-row,
    .nick-bar,
    .ban-confirm-row {
        width: 100%;
        max-width: 100%;
        flex-wrap: wrap;
    }

    .controls > .input-group,
    .controls > .search-box,
    .controls > input,
    .controls > select,
    .toolbar-left,
    .search-box,
    .input-group,
    .volume-group {
        width: 100%;
        max-width: 100%;
        min-width: 0 !important;
        flex: 1 1 100%;
    }

    .controls > .btn,
    .controls > .button,
    .controls > button,
    .toolbar > .btn,
    .toolbar > button,
    .button-group > .button,
    .button-group > .btn {
        flex: 1 1 140px;
        justify-content: center;
    }

    .room-header {
        align-items: flex-start;
    }

    .room-header .actions {
        margin-left: 0;
        flex: 1 1 100%;
    }

    .room-header .actions > * {
        flex: 1 1 120px;
        justify-content: center;
    }

    /* 大表格保留全部列，通过手势横向浏览。 */
    .table-container,
    .table-wrap,
    .table-responsive,
    .community-table-wrap {
        width: 100%;
        max-width: 100%;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior-inline: contain;
    }

    table {
        display: block;
        width: 100%;
        max-width: 100%;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        white-space: nowrap;
    }

    th,
    td {
        white-space: nowrap;
    }

    /* 弹窗适配动态地址栏、刘海和底部手势区。 */
    .modal-overlay,
    .modal-mask,
    .modal-backdrop,
    [class*="modal-overlay"] {
        padding-top: max(12px, env(safe-area-inset-top));
        padding-right: max(12px, env(safe-area-inset-right));
        padding-bottom: max(12px, env(safe-area-inset-bottom));
        padding-left: max(12px, env(safe-area-inset-left));
        overflow-y: auto;
        align-items: center;
    }

    .modal,
    .modal-content,
    .dialog,
    .popup,
    .login-box,
    .login-container {
        width: 100% !important;
        max-width: min(100%, 560px) !important;
        max-height: calc(100dvh - 24px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
        margin: auto !important;
        overflow-y: auto;
        padding: 18px !important;
    }

    /* 语音房间 */
    #room-picker {
        max-width: 100%;
    }

    .participants,
    .pick-fixed-grid {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    .channel-tree .room-row,
    .channel-tree .room-header,
    .community-choice {
        max-width: 100%;
    }

    .device-row {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 8px !important;
    }

    .device-row label {
        min-width: 0 !important;
        white-space: normal !important;
    }

    .volume-group {
        display: grid;
        grid-template-columns: auto minmax(80px, 1fr) auto;
    }

    /* 玩家分析：手机上取消粘滞花名册，避免遮挡统计内容。 */
    .roster-card {
        position: static !important;
        top: auto !important;
    }

    .roster-list {
        max-height: 300px !important;
    }

    .chart-container {
        min-height: 220px;
        max-width: 100%;
        overflow: hidden;
    }

    /* 群体后台：侧栏改为顶部横向标签，内容自然纵向滚动。 */
    .admin-container.active {
        display: flex;
        flex-direction: column !important;
        width: 100%;
        max-width: 100%;
        min-height: 0 !important;
        height: auto !important;
        overflow: visible !important;
        border-radius: 14px;
    }

    .admin-sidebar {
        width: 100% !important;
        max-width: 100%;
        flex: 0 0 auto;
    }

    .sidebar-header {
        padding: 16px !important;
    }

    .sidebar-nav {
        display: flex !important;
        flex-flow: row nowrap !important;
        width: 100%;
        padding: 8px !important;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    .sidebar-nav::-webkit-scrollbar {
        display: none;
    }

    .sidebar-nav .nav-item {
        flex: 0 0 auto;
        min-height: 44px;
        padding: 10px 14px !important;
        border-left: 0 !important;
        border-bottom: 3px solid transparent;
        white-space: nowrap;
    }

    .sidebar-nav .nav-item.active {
        border-bottom-color: currentColor;
    }

    .sidebar-footer {
        display: none;
    }

    .admin-main {
        display: block !important;
        width: 100%;
        max-width: 100%;
        overflow: visible !important;
    }

    .admin-main > .tab-content,
    .admin-container > .tab-content,
    .admin-main .tab-content {
        width: 100%;
        max-width: 100%;
        height: auto !important;
        overflow: visible !important;
        padding: 14px !important;
    }

    /* 超级后台 */
    .main-content > .toolbar,
    .main-content .toolbar {
        align-items: stretch;
        gap: 10px;
    }

    .main-content .toolbar > button,
    .main-content .toolbar > .btn-add {
        flex: 1 1 150px;
        justify-content: center;
    }

    .community-table {
        min-width: 760px;
    }

    .toast {
        left: max(12px, env(safe-area-inset-left)) !important;
        right: max(12px, env(safe-area-inset-right)) !important;
        bottom: max(12px, env(safe-area-inset-bottom)) !important;
        width: auto !important;
        max-width: none !important;
        transform: none !important;
    }

    .admin-float-btn,
    .floating-action-btn {
        right: max(12px, env(safe-area-inset-right)) !important;
        bottom: max(12px, env(safe-area-inset-bottom)) !important;
    }

    /* 手动分组中的玩家行在手机上改成可换行卡片。 */
    .player-row {
        max-width: 100%;
    }

    .players-section .player-row,
    #playersList .player-row {
        grid-template-columns: minmax(0, 1fr) auto !important;
        padding: 14px !important;
    }

    /* 首页实时房间中的人名不再把整行撑宽。 */
    .tracker-room-item,
    .tracker-game-info,
    .community-tracker-header,
    .download-card {
        max-width: 100%;
    }

    .tracker-room-players {
        max-width: 100% !important;
    }
}

@media (max-width: 480px) {
    :root {
        --mobile-page-gap: 8px;
        --mobile-card-gap: 12px;
    }

    .top-nav {
        margin-left: 0;
        margin-right: 0;
    }

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

    .stat-card .stat-number,
    .stat-card .stat-value,
    .stat-card .value {
        font-size: 1.35rem !important;
    }

    .card-header,
    .section-header,
    .page-header,
    .tracker-game-info {
        gap: 8px;
    }

    .modal,
    .modal-content,
    .login-box,
    .login-container {
        border-radius: 14px !important;
        padding: 16px !important;
    }

    .participants {
        gap: 8px;
    }

    .p-item {
        padding: 10px;
    }

    .match-item {
        align-items: flex-start;
        gap: 8px;
        flex-wrap: wrap;
    }
}

/* 全屏步弓练习场和录像地图保持画布逻辑，只压缩手机控制面板。 */
@media (max-width: 768px) {
    body.archery-game-page {
        padding: 0 !important;
        overflow: hidden !important;
    }

    body.archery-game-page .toolbar {
        max-width: 100vw;
        overflow-x: auto;
        flex-wrap: nowrap;
        padding-left: max(8px, env(safe-area-inset-left));
        padding-right: max(8px, env(safe-area-inset-right));
    }

    body.archery-game-page .toolbar > * {
        flex: 0 0 auto;
    }

    body.archery-game-page .formation-panel {
        max-width: calc(100vw - 120px);
        overflow-x: auto;
        justify-content: flex-start;
        left: 8px;
        transform: none;
    }

    body.archery-game-page .hint {
        display: none;
    }
}