/* ============================================================
   TCG Collection — Mobile-specific overrides (<= 768px)
   ============================================================ */

@media (max-width: 768px) {

    /* Nav becomes a horizontal scroll strip; brand + user pin to ends */
    .tcg-nav-inner {
        padding: var(--tcg-s-2) var(--tcg-s-3);
        gap: var(--tcg-s-2);
    }
    .tcg-nav-links {
        order: 3;
        flex-basis: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        flex-wrap: nowrap;
        scrollbar-width: none;
    }
    .tcg-nav-links::-webkit-scrollbar { display: none; }
    .tcg-nav-links a span { display: inline; }
    .tcg-nav-user { margin-left: auto; }
    .tcg-nav-user-name { display: none; }

    /* Forms — bigger inputs on phone */
    .tcg-input {
        font-size: 16px; /* prevents iOS zoom-on-focus */
    }

    /* Login card spans the screen */
    .tcg-login-card { max-width: 100%; border-radius: var(--tcg-radius); }
    .tcg-login-header { padding: var(--tcg-s-5) var(--tcg-s-4); }
    .tcg-login-body   { padding: var(--tcg-s-5) var(--tcg-s-4); }

    /* Diagnostic page tiles stack */
    .tcg-diag-grid { grid-template-columns: 1fr; }

    /* Collection — tighter spacing on phone */
    .tcg-collection-summary { gap: var(--tcg-s-2); margin: var(--tcg-s-2) 0; }
    .tcg-summary-stats { gap: var(--tcg-s-4); }
    .tcg-summary-stat-value { font-size: var(--tcg-fs-lg); }

    .tcg-toolbar-row { gap: var(--tcg-s-1); }
    .tcg-sort-select { flex: 1 1 100%; min-width: 0; order: 99; }
    .tcg-filter-toggle .badge { padding: 2px 6px; }

    .tcg-card-grid {
        grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
        gap: var(--tcg-s-2);
    }
    .tcg-card-tile-name { font-size: var(--tcg-fs-xs); }

    /* Detail page — single column, image on top */
    .tcg-detail-grid {
        grid-template-columns: 1fr;
        gap: var(--tcg-s-3);
    }
    .tcg-detail-image { max-width: 320px; margin: 0 auto; }

    /* Stats — single column */
    .tcg-stats-two-col { grid-template-columns: 1fr; }
    .tcg-color-bar-row {
        grid-template-columns: 70px 1fr;
        grid-template-areas: "label bar" "val val";
        row-gap: 2px;
    }
    .tcg-color-bar-label { grid-area: label; }
    .tcg-color-bar-track { grid-area: bar; }
    .tcg-color-bar-val   { grid-area: val; text-align: left; }
}