/* ============================================
   ENHANCED MOBILE RESPONSIVE STYLES
   ============================================ */

/* Mobile: CWL Tab Fixes */
@media (max-width: 768px) {

    /* ============================
       PERFORMANCE OPTIMIZATIONS
       ============================ */

    /* Fix fixed background - causes major lag on mobile */
    .app-container {
        background-attachment: scroll !important;
    }

    /* Disable infinite animations on mobile for battery & performance */
    .pulsing-border,
    .pulse-glow,
    .shimmer-effect,
    .rotate-glow,
    .pulse-alert,
    .crystal-pulse,
    [class*="animate-"] {
        animation: none !important;
    }

    /* Reduce shadow complexity */
    .glass-panel,
    .wood-frame,
    .stat-box,
    .member-row,
    .slacker-card {
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3) !important;
    }

    /* Enable hardware acceleration for scrolling - NOT app-container (breaks fixed children) */
    .esports-matrix-container,
    .member-list,
    .war-history-list {
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;
    }

    /* Reduce filter effects */
    .title-glow,
    .clash-font {
        text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5) !important;
    }

    /* Simplify transitions - but exclude bottom-nav from transform changes */
    *:not(.bottom-nav) {
        transition-duration: 0.15s !important;
    }

    /* Ensure bottom-nav stays fixed at bottom on mobile */
    .bottom-nav {
        position: fixed !important;
        bottom: 10px !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
        z-index: 9999 !important;
    }

    /* CWL Matrix - Make it scrollable horizontally */
    .esports-matrix-container {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
    }

    .esports-matrix {
        font-size: 0.75rem !important;
        min-width: 400px !important;
    }

    .esports-matrix .matrix-header-cell img {
        width: 20px !important;
        height: 20px !important;
    }

    .esports-matrix .matrix-cell {
        padding: 8px 6px !important;
        min-width: 45px !important;
    }

    .esports-matrix .name-cell {
        min-width: 80px !important;
        max-width: 100px !important;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* CWL Grid - Stack columns */
    .cwl-grid {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }

    /* CWL Clan Cards */
    .cwl-clan-card {
        min-width: 100px !important;
        padding: 10px !important;
    }

    .cwl-group-scroll {
        gap: 8px !important;
        padding-bottom: 8px !important;
    }

    .cwl-clan-name {
        font-size: 0.7rem !important;
    }

    /* Home Player Card - Fix cut-off name */
    .player-name {
        font-size: 1.5rem !important;
        word-break: break-word !important;
        overflow-wrap: break-word !important;
        line-height: 1.2 !important;
    }

    .player-card {
        padding: 16px !important;
    }

    .th-image {
        width: 150px !important;
        height: 150px !important;
    }

    /* Stats Grid - 2x2 layout */
    .player-stats {
        grid-template-columns: 1fr 1fr !important;
        gap: 8px !important;
    }

    .stat-item {
        padding: 12px !important;
        gap: 8px !important;
    }

    .stat-icon-img {
        width: 36px !important;
        height: 36px !important;
    }

    .stat-value {
        font-size: 1.2rem !important;
    }

    .stat-label {
        font-size: 0.7rem !important;
    }

    /* Search Section */
    .search-section {
        flex-direction: column !important;
        gap: 10px !important;
        padding: 20px 16px !important;
        max-width: 100% !important;
    }

    .search-input {
        width: 100% !important;
        min-width: unset !important;
    }

    .search-section .gold-btn {
        width: 100% !important;
        margin-left: 0 !important;
    }

    /* Glass panels */
    .glass-panel {
        padding: 12px !important;
    }

    /* Priority cards — full width stack on mobile */
    .priority-card {
        min-width: 100% !important;
        max-width: 100% !important;
        min-height: 140px !important;
    }

    #priority-grid {
        flex-direction: column !important;
    }

    .section-title {
        font-size: 0.95rem !important;
    }

    /* Matchup Card */
    .matchup-card {
        padding: 12px !important;
    }

    .ai-advisor-card {
        padding: 12px !important;
    }

    /* ============================
       WAR TRACKER MOBILE FIXES 
       ============================ */

    /* Statistics Grid - Force 2x2 */
    .performance-grid {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 10px !important;
    }

    .perf-card {
        padding: 12px !important;
        min-width: 0 !important;
        /* Fix flex overflow */
    }

    .perf-card-title {
        font-size: 0.75rem !important;
    }

    .perf-card-value {
        font-size: 1.2rem !important;
    }

    /* War Header & Toggles */
    .hub-header {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 12px !important;
    }

    #sync-indicator {
        font-size: 0.6rem !important;
    }

    .time-toggle {
        width: 100% !important;
        display: flex !important;
    }

    .toggle-btn {
        flex: 1 !important;
        text-align: center !important;
    }

    /* Sorting Controls */
    .member-perf-section>div:first-child {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 12px !important;
    }

    .sort-controls {
        width: 100% !important;
        justify-content: space-between !important;
        overflow-x: auto !important;
        padding-bottom: 4px !important;
    }

    .sort-btn {
        flex: 1 !important;
        text-align: center !important;
        min-width: 65px !important;
        padding: 4px 6px !important;
    }

    /* Member List Rows - Stack Content */
    .member-row {
        flex-wrap: wrap !important;
        gap: 8px !important;
        padding: 12px !important;
    }

    .member-rank {
        font-size: 0.9rem !important;
        width: 24px !important;
    }

    .member-info {
        flex: 1 1 60% !important;
        /* Take up mostly left side */
        min-width: 120px !important;
    }

    /* Force stats to new line on very small screens or compressed */
    .member-stats {
        flex: 1 1 100% !important;
        display: flex !important;
        justify-content: space-between !important;
        border-top: 1px solid rgba(255, 255, 255, 0.05);
        padding-top: 8px !important;
        margin-top: 4px !important;
    }

    .stat-box {
        flex-direction: column !important;
        align-items: center !important;
        background: rgba(0, 0, 0, 0.2) !important;
        padding: 4px 8px !important;
        border-radius: 6px !important;
        min-width: 50px !important;
    }

    .stat-value {
        font-size: 0.9rem !important;
    }

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

    .slacker-card {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 12px !important;
        padding: 16px !important;
    }

    .slacker-details {
        flex-direction: row !important;
        align-items: center !important;
        justify-content: space-between !important;
    }

    .slacker-badge {
        width: 100% !important;
        text-align: center !important;
        justify-content: center !important;
        padding: 8px !important;
    }

    /* War Mirror Simulator Fix */
    #war-mirror-section .wood-frame-inner>div:first-of-type {
        flex-direction: column !important;
        gap: 10px !important;
    }

    #war-mirror-section .search-input {
        width: 100% !important;
    }

    #scout-btn {
        width: 100% !important;
    }
}

/* Extra Small Mobile (phones < 480px) */
@media (max-width: 480px) {
    .player-name {
        font-size: 1.2rem !important;
    }

    .player-tag {
        font-size: 0.9rem !important;
    }

    .th-level-badge {
        font-size: 0.9rem !important;
        padding: 6px 12px !important;
    }

    .th-image {
        width: 120px !important;
        height: 120px !important;
    }

    /* Matrix - even smaller */
    .esports-matrix .matrix-cell {
        padding: 6px 4px !important;
        font-size: 0.65rem !important;
    }

    .esports-matrix .name-cell {
        max-width: 70px !important;
        font-size: 0.65rem !important;
    }

    .esports-matrix .matrix-header-cell img {
        width: 16px !important;
        height: 16px !important;
    }

    /* Stats - stack vertically on very small screens */
    .player-stats {
        grid-template-columns: 1fr !important;
    }

    .stat-item {
        padding: 10px !important;
    }

    .header-title {
        font-size: 1.5rem !important;
    }

    .header-logo {
        height: 50px !important;
    }

    /* Fixed Header Alignment */
    .header {
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        text-align: center !important;
        gap: 8px !important;
    }

    .header>div {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        width: 100% !important;
    }

    .header-title {
        font-size: 1.5rem !important;
        line-height: 1.2 !important;
        margin: 0 !important;
        text-align: center !important;
    }

    .header-subtitle {
        font-size: 0.85rem !important;
        text-align: center !important;
    }

    /* Fix Health Meter Empty State Overlap */
    .health-meter-container {
        padding: 20px !important;
        min-height: auto !important;
    }

    .health-note {
        font-size: 0.8rem !important;
        line-height: 1.6 !important;
        margin-top: 12px !important;
        opacity: 0.7;
    }
}

/* ============================================
   WAR TAB MOBILE OVERHAUL (Android/iOS First)
   ============================================ */
@media (max-width: 768px) {

    /* 1. INTEL NAV - Scrollable pills */
    .intel-nav-row {
        margin-bottom: 16px !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
        padding: 0 4px !important;
        scrollbar-width: none;
        -ms-overflow-style: none;
    }

    .intel-nav-row::-webkit-scrollbar {
        display: none;
    }

    .intel-segmented-control {
        display: flex !important;
        min-width: max-content !important;
        gap: 4px !important;
        padding: 3px !important;
        border-radius: 30px !important;
        width: auto !important;
    }

    .intel-toggle {
        flex: none !important;
        padding: 10px 12px !important;
        font-size: 0.65rem !important;
        white-space: nowrap !important;
        text-align: center !important;
        min-height: 44px !important;
        /* Touch target */
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    /* 2. SCOREBOARD - Stacked for mobile */
    .live-grid-row {
        display: flex !important;
        flex-direction: column !important;
        gap: 12px !important;
    }

    .intel-card {
        width: 100% !important;
        flex: none !important;
        min-width: 0 !important;
    }

    .live-status-card {
        padding: 14px !important;
    }

    .live-score-display {
        gap: 8px !important;
        padding: 8px 0 !important;
    }

    .score-big {
        font-size: 2.2rem !important;
        line-height: 1 !important;
    }

    .score-sub {
        font-size: 0.75rem !important;
    }

    .score-clan-label {
        font-size: 0.65rem !important;
        max-width: 110px !important;
    }

    .score-attacks {
        font-size: 0.65rem !important;
    }

    .score-vs {
        font-size: 0.85rem !important;
    }

    /* War header info */
    .live-status-header {
        margin-bottom: 10px !important;
    }

    .status-badge {
        font-size: 0.7rem !important;
    }

    /* 3. TIMER CARD */
    .timer-card {
        padding: 14px !important;
    }

    .pulsing-timer {
        font-size: 1.8rem !important;
    }

    .timer-label {
        font-size: 0.65rem !important;
    }

    /* 4. MOMENTUM BAR */
    .momentum-bar-container {
        height: 12px !important;
    }

    .momentum-labels {
        font-size: 0.65rem !important;
    }

    /* 5. SIMULATION / WIN PROB */
    .sim-value {
        font-size: 2rem !important;
    }

    .sim-sub {
        font-size: 0.7rem !important;
    }

    /* 6. SLACKER LIST */
    .slacker-list-condensed {
        max-height: 250px !important;
    }

    .slacker-chip-compact {
        padding: 6px 10px !important;
        font-size: 0.75rem !important;
    }

    /* 7. ATTACK TIMELINE */
    .timeline-item {
        padding: 10px 8px !important;
        gap: 8px !important;
        min-height: 44px !important;
        /* Touch target */
    }

    .t-time {
        min-width: 45px !important;
        font-size: 0.65rem !important;
    }

    /* 8. PRIORITY TARGETS */
    .target-card {
        padding: 10px !important;
    }

    /* 9. BENTO TIERS - Stack everything */
    .bento-tier-1,
    .bento-tier-2 {
        grid-template-columns: 1fr !important;
        gap: 10px !important;
    }

    .bento-card {
        padding: 12px !important;
        border-radius: 12px !important;
    }

    .bento-value {
        font-size: 1.2rem !important;
    }

    /* 10. BENTO TABS (Player Perf / War Report) */
    .bento-tabs {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
        gap: 2px !important;
        padding: 3px !important;
        flex-wrap: nowrap !important;
    }

    .bento-tab {
        flex: none !important;
        padding: 8px 12px !important;
        font-size: 0.7rem !important;
        white-space: nowrap !important;
        min-height: 40px !important;
    }

    /* 11. KEY NUMBERS GRID */
    .key-numbers-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 8px !important;
    }

    .number-box {
        padding: 10px 6px !important;
    }

    .number-value {
        font-size: 1rem !important;
    }

    .number-label {
        font-size: 0.6rem !important;
    }

    /* 12. REPORT SECTIONS */
    .report-section .section-header {
        padding: 10px 12px !important;
        font-size: 0.8rem !important;
        min-height: 44px !important;
    }

    .report-item {
        padding: 8px 0 !important;
    }

    .report-item-title {
        font-size: 0.8rem !important;
    }

    .report-item-desc {
        font-size: 0.75rem !important;
    }

    /* 13. VERDICT */
    .verdict-section {
        padding: 12px !important;
    }

    .verdict-badge {
        font-size: 1rem !important;
    }

    .verdict-text {
        font-size: 0.8rem !important;
    }

    /* 14. TACTICAL INSIGHT */
    .tactical-insight {
        padding: 10px 12px !important;
        font-size: 0.75rem !important;
    }

    /* 15. SHARE BUTTON */
    .share-btn {
        padding: 12px !important;
        font-size: 0.85rem !important;
        min-height: 48px !important;
        /* Easy touch */
    }

    /* 16. WAR DNA (Overview) */
    .dna-stat-grid {
        grid-template-columns: 1fr 1fr !important;
        gap: 10px !important;
    }

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

    .dna-stat-value {
        font-size: 1.3rem !important;
    }

    /* 17. CAMPAIGN LOG */
    .compact-war-entry {
        padding: 10px !important;
        gap: 8px !important;
        min-height: 44px !important;
    }

    /* 18. SYNC STATUS BAR */
    .sync-status-bar {
        padding: 8px 12px !important;
        font-size: 0.7rem !important;
    }

    /* 19. WAR DASHBOARD BENTO container */
    .war-dashboard-bento {
        padding: 8px !important;
        gap: 12px !important;
    }

    /* 20. SCROLL OPTIMIZATION */
    .intel-room-container {
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
    }

    /* 21. BOTTOM NAV CLEARANCE */
    .war-dashboard-bento,
    #war-content {
        padding-bottom: 100px !important;
        /* Room for floating bottom nav */
    }

    /* 22. STATUS CHIP */
    .status-chip {
        font-size: 0.7rem !important;
        padding: 4px 10px !important;
    }

    .status-chip-container {
        padding: 6px 10px !important;
        gap: 8px !important;
    }

    /* 23. INSIGHT DRAWER */
    .insight-drawer {
        padding: 12px !important;
    }

    .insight-item {
        font-size: 0.75rem !important;
    }

    /* 24. OVERVIEW SECTION */
    #overview-intel-panel .glass-panel {
        padding: 12px !important;
    }

    #overview-intel-panel .section-title {
        font-size: 0.85rem !important;
    }

    /* Overview: Reliability Matrix */
    .reliability-grid {
        grid-template-columns: 1fr !important;
    }

    /* Overview: Player cards */
    .player-perf-row {
        padding: 8px 10px !important;
        gap: 8px !important;
    }

    /* 25. WAR ROOM */
    #warroom-intel-panel .war-room-grid {
        grid-template-columns: 1fr !important;
    }

    .matchup-row {
        flex-direction: column !important;
        gap: 6px !important;
    }

    /* 26. DEBRIEF STORIES */
    .story-card {
        padding: 12px !important;
    }

    .story-title {
        font-size: 0.85rem !important;
    }

    .story-body {
        font-size: 0.75rem !important;
    }

    /* 27. PREP DAY BANNER */
    .debrief-prep-banner {
        padding: 16px !important;
    }

    .prep-title {
        font-size: 1.2rem !important;
    }

    .th-dist-chip {
        font-size: 0.7rem !important;
        padding: 3px 8px !important;
    }
}

/* Extra Small (< 400px) — iPhone SE, small Android */
@media (max-width: 400px) {
    .intel-toggle {
        font-size: 0.58rem !important;
        padding: 8px 5px !important;
    }

    .score-big {
        font-size: 1.8rem !important;
    }

    .score-clan-label {
        max-width: 85px !important;
        font-size: 0.58rem !important;
    }

    .pulsing-timer {
        font-size: 1.5rem !important;
    }

    .bento-value {
        font-size: 1rem !important;
    }

    .card-title {
        font-size: 0.75rem !important;
    }

    /* Even smaller key numbers */
    .key-numbers-grid {
        gap: 6px !important;
    }

    .number-value {
        font-size: 0.9rem !important;
    }
}