/*
 * ============================================================================
 * MOBILE RESPONSIVE STYLES
 * ============================================================================
 * Target: 320px - 430px screens (iPhone SE to iPhone Pro Max)
 * Design: Touch-first, thumb-friendly, no horizontal scroll
 * Maintains: Game HUD aesthetic with neon accents
 * ============================================================================
 */

/* ============================================================================
 * CSS VARIABLES - Mobile Overrides
 * ============================================================================ */
:root {
    --mobile-nav-height: 60px;
    --mobile-header-height: 70px;
    --mobile-safe-bottom: env(safe-area-inset-bottom, 0px);
    --mobile-safe-top: env(safe-area-inset-top, 0px);
    --mobile-touch-min: 44px; /* Apple HIG minimum touch target */
    --mobile-gap: 12px;
    --mobile-padding: 16px;
}

/* ============================================================================
 * GLOBAL MOBILE STYLES (max-width: 480px)
 * ============================================================================ */
@media (max-width: 480px) {
    /* Prevent horizontal scroll AND overscroll bounce */
    html, body {
        overflow-x: hidden;
        max-width: 100vw;
        overscroll-behavior: none;
        position: fixed;
        width: 100%;
        height: 100%;
    }
    
    /* Allow main content to scroll */
    .main-content {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        overflow-y: auto;
        overflow-x: hidden;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior-y: contain;
    }
    
    * {
        -webkit-tap-highlight-color: transparent;
        -webkit-touch-callout: none;
    }
    
    /* Better touch scrolling */
    .view-container,
    .character-grid,
    .rankings-list,
    .feed-scroll-region {
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
    }
    
    /* ========================================
       STANDARDIZED CLOSE BUTTON - Red X
       ======================================== */
    .panel-close-btn {
        position: absolute;
        top: 10px;
        right: 10px;
        width: 36px;
        height: 36px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: rgba(255, 50, 50, 0.15);
        border: 1px solid rgba(255, 50, 50, 0.4);
        border-radius: 50%;
        color: #ff4444;
        font-size: 1rem;
        cursor: pointer;
        z-index: 100;
        transition: all 0.2s ease;
    }
    
    .panel-close-btn:hover,
    .panel-close-btn:active {
        background: rgba(255, 50, 50, 0.3);
        border-color: #ff4444;
        color: #ff6666;
        transform: scale(1.05);
    }
}

/* ============================================================================
 * MOBILE NAVIGATION - Bottom Tab Bar
 * ============================================================================ */
@media (max-width: 480px) {
    /* Hide desktop nav tabs in header */
    .game-header .nav-tabs {
        display: none !important;
    }
    
    /* Compact header - just logo and auth - STICKY */
    .game-header {
        padding: 10px var(--mobile-padding) !important;
        padding-top: calc(10px + var(--mobile-safe-top)) !important;
        gap: 10px !important;
        justify-content: space-between !important;
        min-height: 64px !important;
        max-height: 70px !important;
        height: auto !important;
        overflow: visible !important;
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        z-index: 9000 !important;
        background: linear-gradient(180deg, rgba(5, 10, 20, 0.98) 0%, rgba(0, 8, 18, 0.95) 100%) !important;
        border-bottom: 1px solid rgba(0, 212, 255, 0.2) !important;
    }
    
    /* Add top padding to body/main content to account for fixed header */
    .main-content,
    .view-container {
        padding-top: 75px !important;
        margin-top: 0 !important;
    }
    
    /* Stats view needs extra margin to clear fixed header */
    #stats-view.active-view {
        margin-top: 0 !important;
        padding-top: 10px !important;
    }
    
    .header-brand {
        flex: 0 0 auto;
    }
    
    /* Make logo bigger, hide title text */
    .header-logo {
        width: 44px !important;
        height: 44px !important;
        cursor: pointer !important;
        flex-shrink: 0 !important;
    }
    
    /* Hide the title text on mobile, just show logo */
    .game-header h1 {
        display: none !important;
    }
    
    /* Auth area mobile - centered */
    .auth-area {
        position: relative !important;
        right: auto !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        flex: 1 !important;
    }
    
    .auth-btn {
        padding: 8px 12px !important;
        font-size: 0.7rem !important;
        min-height: var(--mobile-touch-min) !important;
    }
    
    /* Login button centered when logged out */
    .auth-login-btn {
        margin: 0 auto !important;
    }
    
    /* User stats bar - centered and bigger */
    .user-stats-bar {
        padding: 6px 12px !important;
        gap: 10px !important;
        flex-wrap: nowrap !important;
        max-height: 54px !important;
        align-items: center !important;
        justify-content: center !important;
    }
    
    /* Profile mini section - metallic boxy design */
    .user-profile-mini {
        padding: 5px 10px 5px 5px !important;
        gap: 8px !important;
        border-radius: 5px !important;
    }
    
    .user-avatar-mini {
        width: 32px !important;
        height: 32px !important;
        border-radius: 4px !important;
    }
    
    .user-avatar-mini i {
        font-size: 1.1rem !important;
    }
    
    .user-level-info {
        gap: 3px !important;
    }
    
    .user-name-mini {
        font-size: 0.75rem !important;
        max-width: 65px !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        letter-spacing: 1px !important;
    }
    
    .user-level-badge {
        font-size: 0.55rem !important;
        padding: 2px 5px !important;
        border-radius: 2px !important;
    }
    
    .xp-bar-container {
        width: 55px !important;
        height: 10px !important;
        border-radius: 3px !important;
    }
    
    .xp-bar-text {
        font-size: 0.5rem !important;
        line-height: 1 !important;
    }
    
    /* Battle points display - bigger */
    .battle-points-display {
        padding: 6px 10px !important;
        gap: 4px !important;
    }
    
    .bp-coin {
        width: 26px !important;
        height: 26px !important;
        font-size: 0.85rem !important;
    }
    
    .bp-amount {
        font-size: 0.9rem !important;
    }
    
    .bp-label {
        font-size: 0.65rem !important;
    }
    
    /* Login button styling */
    .auth-login-btn {
        padding: 8px 12px !important;
        font-size: 0.7rem !important;
        min-height: 36px !important;
    }
    
    .user-avatar-small {
        width: 28px !important;
        height: 28px !important;
    }
    
    .user-name-small {
        font-size: 0.7rem !important;
        max-width: 70px;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    
    .user-xp-badge {
        font-size: 0.6rem !important;
        padding: 2px 5px !important;
    }

    /* Create mobile bottom navigation */
    body::after {
        content: '';
        display: block;
        height: calc(var(--mobile-nav-height) + var(--mobile-safe-bottom));
    }
}

/* Mobile Bottom Navigation Bar - Injected via CSS or requires HTML element */
.mobile-bottom-nav {
    display: none;
}

@media (max-width: 480px) {
    /* Hide bottom nav on home and auth pages */
    html.is-home .mobile-bottom-nav,
    html.is-login .mobile-bottom-nav,
    html.is-signup .mobile-bottom-nav,
    html.is-about .mobile-bottom-nav,
    html.is-profile .mobile-bottom-nav {
        display: none !important;
    }
    
    .mobile-bottom-nav {
        display: flex !important;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        height: var(--mobile-nav-height);
        padding-bottom: var(--mobile-safe-bottom);
        background: linear-gradient(180deg, rgba(10, 20, 35, 0.98) 0%, rgba(5, 10, 20, 0.99) 100%);
        border-top: 1px solid rgba(0, 212, 255, 0.3);
        box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.5);
        z-index: 9000;
        justify-content: space-around;
        align-items: center;
    }
    
    .mobile-nav-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        flex: 1;
        height: 100%;
        padding: 8px 4px;
        color: rgba(255, 255, 255, 0.5);
        text-decoration: none;
        transition: all 0.2s ease;
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
    }
    
    .mobile-nav-item:active {
        transform: scale(0.95);
    }
    
    .mobile-nav-item.active {
        color: #00d4ff;
    }
    
    .mobile-nav-item i {
        font-size: 1.25rem;
        margin-bottom: 4px;
    }
    
    .mobile-nav-item span {
        font-size: 0.6rem;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        font-family: 'Orbitron', 'Rajdhani', sans-serif;
    }
    
    .mobile-nav-item.active i {
        filter: drop-shadow(0 0 6px rgba(0, 212, 255, 0.8));
    }
}

/* ============================================================================
 * HOME PAGE - Mobile Layout
 * ============================================================================ */
@media (max-width: 480px) {
    #home-view {
        padding: var(--mobile-padding) !important;
        padding-top: calc(var(--mobile-header-height) + var(--mobile-padding)) !important;
        padding-bottom: calc(var(--mobile-nav-height) + var(--mobile-safe-bottom) + var(--mobile-padding)) !important;
    }
    
    /* Home auth corner */
    .home-auth-corner {
        top: auto !important;
        right: auto !important;
        position: relative !important;
        margin-bottom: 16px !important;
    }
    
    /* Logo section */
    .portal-logo-section {
        margin-bottom: 24px !important;
    }
    
    .portal-main-logo {
        width: clamp(60px, 15vw, 80px) !important;
        height: clamp(60px, 15vw, 80px) !important;
    }

    .portal-title {
        font-size: clamp(1.2rem, 4vw, 1.5rem) !important;
        letter-spacing: clamp(2px, 0.5vw, 3px) !important;
    }

    .portal-tagline {
        font-size: clamp(0.7rem, 2vw, 0.8rem) !important;
    }
    
    /* Portal navigation - 2x2 grid */
    .portal-nav {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: var(--mobile-gap) !important;
        padding: 0 !important;
        max-width: 100% !important;
    }
    
    .portal-panel {
        padding: 16px 12px !important;
        min-height: 100px !important;
    }
    
    .panel-icon {
        width: 40px !important;
        height: 40px !important;
        margin-bottom: 8px !important;
    }
    
    .panel-icon i {
        font-size: 1.1rem !important;
    }
    
    .panel-label {
        font-size: 0.75rem !important;
        letter-spacing: 1px !important;
    }
    
    .panel-subtitle {
        font-size: 0.6rem !important;
    }
    
    /* Portal widgets - stack on mobile */
    .portal-widgets {
        flex-direction: column !important;
        gap: 10px !important;
        padding: 16px !important;
    }
    
    .portal-widget {
        flex-direction: row !important;
        justify-content: space-between !important;
        padding: 12px 16px !important;
        width: 100% !important;
    }
    
    .portal-widget-divider {
        display: none !important;
    }
    
    .widget-value {
        font-size: 1.25rem !important;
        order: 2;
    }
    
    .widget-label {
        font-size: 0.7rem !important;
        order: 1;
    }
    
    /* Footer */
    .portal-footer-inner {
        flex-direction: column !important;
        gap: 10px !important;
        padding: var(--mobile-padding) !important;
        font-size: 0.7rem !important;
    }
}

/* ============================================================================
 * STATS PAGE - Mobile Layout (KEEP GRID - Stats Left | Animal Center | Stats Right)
 * ============================================================================ */
@media (max-width: 480px) {
    /* Stats view needs padding-bottom for: nav(60) + grid(130) + bottom-bar(36) + quick-info(~45) + spacing */
    #stats-view.active-view {
        flex-direction: column !important;
        padding-bottom: calc(var(--mobile-nav-height) + var(--mobile-safe-bottom) + 130px + 36px + 50px + 16px) !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        padding-top: 80px !important;
        margin-top: 0 !important;
    }
    
    /* When menu is hidden, reduce padding-bottom */
    body:has(.character-grid-container.hidden) #stats-view.active-view {
        padding-bottom: calc(var(--mobile-nav-height) + var(--mobile-safe-bottom) + 36px + 50px + 16px) !important;
    }
    
    /* Grid layout - properly sized columns with center constrained */
    /* Stats panels on left/right, animal image in center */
    /* Height reduced to push content higher above quick-info-bar */
    .character-display-area {
        display: grid !important;
        grid-template-columns: minmax(85px, 28%) minmax(140px, 44%) minmax(85px, 28%) !important;
        grid-template-rows: 1fr !important;
        gap: 0 !important;
        padding: 8px 6px !important;
        padding-bottom: 8px !important;
        margin-top: 0 !important;
        overflow: visible !important;
        align-items: stretch !important;
        flex: 0 0 auto !important;
        min-height: 280px !important;
        max-height: calc(100vh - 65px - var(--mobile-nav-height) - 130px - 36px - 50px - 60px) !important;
        height: calc(100vh - 65px - var(--mobile-nav-height) - 130px - 36px - 50px - 60px) !important;
        width: 100% !important;
        box-sizing: border-box !important;
        position: relative !important;
    }
    
    /* Left stats panel - high z-index to stay above center */
    /* animation: none prevents transforms from creating stacking context issues */
    /* Use flex-start + padding-top so content starts at top and grows downward */
    /* padding-top: 80px matches character-showcase to align stats with animal image */
    .stats-panel.stats-panel-left {
        grid-column: 1 !important;
        grid-row: 1 !important;
        width: 100% !important;
        max-width: 100% !important;
        overflow: visible !important;
        padding: 80px 2px 4px 6px !important;
        align-self: stretch !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: flex-start !important;
        z-index: 5 !important;
        position: relative !important;
        background: transparent !important;
        animation: none !important;
        transform: none !important;
    }
    
    /* Center showcase - constrained, lower z-index */
    /* IMPORTANT: animation: none prevents transform-based animations from creating */
    /* a new containing block, which would break position: fixed on child elements */
    .character-showcase {
        grid-column: 2 !important;
        grid-row: 1 !important;
        width: 100% !important;
        max-width: 100% !important;
        padding: 4px !important;
        padding-top: 80px !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        overflow: visible !important;
        justify-content: flex-start !important;
        min-width: 0 !important;
        z-index: 1 !important;
        position: relative !important;
        animation: none !important;
        transform: none !important;
        align-self: stretch !important;
    }
    
    /* Character name - at top of center column */
    .character-name-display {
        font-size: 0.9rem !important;
        text-align: center !important;
        line-height: 1.2 !important;
        margin-bottom: 2px !important;
        margin-top: 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        overflow: hidden !important;
        max-width: 100% !important;
    }
    
    .character-scientific-name {
        font-size: 0.5rem !important;
        margin-bottom: 2px !important;
    }
    
    /* Battle record - after scientific name */
    .battle-record-badge {
        flex-direction: row !important;
        padding: 3px 4px !important;
        gap: 3px !important;
        margin-top: 2px !important;
        margin-bottom: 4px !important;
        min-width: auto !important;
        max-width: 100% !important;
        justify-content: center !important;
    }
    
    /* Animal image container - expands to fill center column */
    .character-model-container {
        width: 100% !important;
        max-width: 150px !important;
        margin: 4px auto !important;
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        min-height: 100px !important;
        flex: 1 1 auto !important;
    }
    
    /* Quick info bar - fixed position just above the bottom-info-bar */
    /* Has room in center column now */
    .quick-info-bar {
        position: fixed !important;
        bottom: calc(var(--mobile-nav-height) + var(--mobile-safe-bottom) + 130px + 36px + 8px) !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
        right: auto !important;
        display: flex !important;
        flex-wrap: nowrap !important;
        justify-content: center !important;
        align-items: center !important;
        gap: 5px !important;
        padding: 6px 12px !important;
        flex-direction: row !important;
        background: rgba(0, 20, 40, 0.95) !important;
        border-radius: 6px !important;
        border: 1px solid rgba(0, 212, 255, 0.3) !important;
        width: auto !important;
        max-width: 240px !important;
        z-index: 7600 !important;
        box-sizing: border-box !important;
    }
    
    /* When menu is hidden, move quick-info-bar down */
    /* Stack: mobile-nav(60) + bottom-bar(36) = 96px when menu hidden */
    body:has(.character-grid-container.hidden) .quick-info-bar {
        bottom: calc(var(--mobile-nav-height) + var(--mobile-safe-bottom) + 36px + 8px) !important;
        transform: translateX(-50%) !important;
    }
    
    /* Quick info items - bigger since there's room */
    .quick-info-item {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 3px !important;
        font-size: 0.58rem !important;
        color: rgba(255, 255, 255, 0.9) !important;
        padding: 4px 6px !important;
        background: rgba(0, 30, 50, 0.7) !important;
        border: 1px solid rgba(0, 212, 255, 0.2) !important;
        border-radius: 4px !important;
        min-width: 60px !important;
        flex: 0 1 auto !important;
        max-width: 75px !important;
    }
    
    .quick-info-item i {
        color: var(--primary-color) !important;
        font-size: 0.7rem !important;
    }
    
    .quick-info-item .toggle-icon {
        font-size: 0.45rem !important;
        color: rgba(255, 255, 255, 0.4) !important;
        margin-left: 1px !important;
    }
    
    .quick-info-item span {
        min-width: 30px !important;
        text-align: center !important;
        font-variant-numeric: tabular-nums !important;
        font-size: 0.55rem !important;
    }
    
    .quick-info-divider {
        display: none !important;
    }
    
    /* Right stats panel - high z-index to stay above center */
    /* animation: none prevents transforms from creating stacking context issues */
    /* Use flex-start + padding-top so content starts at top and grows downward */
    /* padding-top: 80px matches character-showcase to align stats with animal image */
    .stats-panel.stats-panel-right {
        grid-column: 3 !important;
        grid-row: 1 !important;
        width: 100% !important;
        max-width: 100% !important;
        overflow: visible !important;
        padding: 80px 6px 4px 2px !important;
        align-self: stretch !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: flex-start !important;
        z-index: 5 !important;
        position: relative !important;
        background: transparent !important;
        animation: none !important;
        transform: none !important;
    }
    
    /* Generic stats panel styling */
    .stats-panel {
        padding: 0 !important;
        background: transparent !important;
    }
    
    .record-item {
        flex-direction: column !important;
        padding: 2px 4px !important;
        min-width: 35px !important;
    }
    
    .record-value {
        font-size: 0.7rem !important;
        min-width: 28px !important;
        text-align: center !important;
    }
    
    .record-label {
        font-size: 0.4rem !important;
    }
    
    .record-divider {
        height: 16px !important;
        margin: 0 2px !important;
    }
    
    .record-item i {
        font-size: 0.5rem !important;
    }
    
    .character-model {
        max-height: 150px !important;
        max-width: 100% !important;
        object-fit: contain !important;
        flex: 1 1 auto !important;
    }
    
    /* Silhouette - don't override JS display property */
    .character-silhouette {
        max-width: 70px !important;
        max-height: 70px !important;
    }
    
    .character-silhouette i {
        font-size: 1.8rem !important;
    }
    
    /* Show abilities and traits on mobile - align tops, grow downward */
    .abilities-card,
    .traits-card {
        display: block !important;
        margin-top: 8px !important;
        padding: 4px !important;
        min-height: 60px !important;
        max-height: none !important;
        height: auto !important;
        overflow: visible !important;
        background: rgba(0, 15, 30, 0.6) !important;
        border: 1px solid rgba(0, 212, 255, 0.2) !important;
        border-radius: 4px !important;
        max-width: 100% !important;
        width: 100% !important;
        box-sizing: border-box !important;
        align-self: flex-start !important;
    }
    
    /* Stat group wrapper (#left-stats, #right-stats) - keeps stats together above abilities/traits */
    .stat-group {
        display: flex !important;
        flex-direction: column !important;
        margin-bottom: 8px !important;
    }
    
    /* Stat rows - horizontal layout with proper alignment */
    .stat-group-container {
        margin-bottom: 6px !important;
        width: 100% !important;
    }
    
    .stat-group-title {
        display: none !important;
    }
    
    .stat-row {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        padding: 2px 0 !important;
        gap: 0 !important;
        margin-bottom: 0 !important;
        width: 100% !important;
        box-sizing: border-box !important;
        height: 16px !important;
        line-height: 16px !important;
    }
    
    /* Hide stat icon on mobile */
    .stat-icon {
        display: none !important;
    }
    
    /* Stat name styling */
    .stat-name {
        font-size: 0.55rem !important;
        font-weight: 600 !important;
        min-width: 24px !important;
        max-width: 24px !important;
        margin-bottom: 0 !important;
        margin-right: 4px !important;
        opacity: 1 !important;
        line-height: 16px !important;
        flex-shrink: 0 !important;
        display: flex !important;
        align-items: center !important;
    }
    
    /* Stat bar wrapper - takes remaining space */
    .stat-bar-wrapper {
        flex: 1 1 auto !important;
        min-width: 15px !important;
        display: flex !important;
        align-items: center !important;
        height: 12px !important;
        margin: 0 4px !important;
    }
    
    /* Stat bar - visible with proper sizing */
    .stat-bar {
        height: 10px !important;
        border-radius: 3px !important;
        display: block !important;
        width: 100% !important;
        background: rgba(0, 0, 0, 0.5) !important;
        position: relative !important;
        overflow: hidden !important;
        border: 1px solid rgba(255, 255, 255, 0.15) !important;
    }
    
    .stat-bar-bg {
        border-radius: 3px !important;
        width: 100% !important;
        height: 100% !important;
    }
    
    .stat-bar-fill {
        border-radius: 2px !important;
        height: 100% !important;
        position: absolute !important;
        left: 0 !important;
        top: 0 !important;
    }
    
    /* Stat value container - show number AND tier */
    .stat-value {
        font-size: 0.55rem !important;
        min-width: auto !important;
        max-width: none !important;
        margin-top: 0 !important;
        margin-left: 4px !important;
        line-height: 16px !important;
        flex-shrink: 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: flex-end !important;
        gap: 3px !important;
        height: 16px !important;
    }
    
    /* Hide badge slot but show number and tier */
    .stat-value .stat-badge-slot,
    .stat-value .stat-max-badge,
    .stat-value .stat-high-badge {
        display: none !important;
    }
    
    .stat-value .stat-number {
        display: inline-flex !important;
        align-items: center !important;
        font-size: 0.5rem !important;
        opacity: 0.85 !important;
        line-height: 1 !important;
        min-width: 18px !important;
        justify-content: flex-end !important;
    }
    
    .stat-value .stat-tier-badge {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        font-size: 0.5rem !important;
        padding: 1px 3px !important;
        min-width: 18px !important;
        line-height: 1 !important;
    }
    
    /* LEFT PANEL: name | bar | number grade */
    .stats-panel-left .stat-name {
        text-align: left !important;
        justify-content: flex-start !important;
        order: 1 !important;
    }
    
    .stats-panel-left .stat-bar-wrapper {
        order: 2 !important;
    }
    
    .stats-panel-left .stat-value {
        order: 3 !important;
        justify-content: flex-end !important;
        flex-direction: row !important;
    }
    
    /* RIGHT PANEL: grade number | bar | name */
    .stats-panel-right .stat-row {
        flex-direction: row-reverse !important;
    }
    
    .stats-panel-right .stat-name {
        text-align: right !important;
        justify-content: flex-end !important;
        order: 1 !important;
        margin-right: 0 !important;
        margin-left: 4px !important;
    }
    
    .stats-panel-right .stat-bar-wrapper {
        order: 2 !important;
    }
    
    .stats-panel-right .stat-value {
        order: 3 !important;
        justify-content: flex-start !important;
        flex-direction: row-reverse !important;
        margin-left: 0 !important;
        margin-right: 4px !important;
    }
    
    /* Substats - compact single row */
    .substat-container {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 1px 4px !important;
        padding: 0 !important;
        margin-top: 2px !important;
    }
    
    .substat-container.right-align {
        justify-content: flex-end !important;
    }
    
    .substat-row {
        display: flex !important;
        align-items: center !important;
        gap: 2px !important;
    }
    
    .substat-row.compact {
        padding: 0 !important;
    }
    
    .substat-container.right-align .substat-row {
        flex-direction: row-reverse !important;
    }
    
    .substat-label {
        font-size: 0.4rem !important;
        color: rgba(255, 255, 255, 0.55) !important;
        min-width: auto !important;
    }
    
    .substat-value {
        font-size: 0.45rem !important;
        color: rgba(255, 255, 255, 0.8) !important;
    }
    
    /* Abilities and Traits cards styling */
    .card-header {
        font-size: 0.5rem !important;
        padding: 2px 4px !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }
    
    .abilities-list,
    .traits-list {
        gap: 2px !important;
        padding: 2px !important;
        overflow: visible !important;
        display: flex !important;
        flex-direction: column !important;
    }
    
    .ability-item,
    .trait-item {
        padding: 2px 4px !important;
        font-size: 0.45rem !important;
        white-space: normal !important;
        word-wrap: break-word !important;
        line-height: 1.2 !important;
    }
    
    /* Details panel - bottom sheet style when expanded */
    .details-panel.expanded {
        position: fixed !important;
        bottom: calc(var(--mobile-nav-height) + var(--mobile-safe-bottom)) !important;
        left: 0 !important;
        right: 0 !important;
        max-height: 70vh !important;
        border-radius: 16px 16px 0 0 !important;
        z-index: 8000 !important;
        padding-bottom: 16px !important;
    }
    
    /* Close button only when expanded */
    .details-close-btn {
        display: none !important;
    }
    
    .details-panel.expanded .details-close-btn {
        display: flex !important;
        margin-bottom: 12px !important;
    }
    
    .details-close-btn button {
        width: 100% !important;
        padding: 12px !important;
        font-size: 0.8rem !important;
        background: rgba(255, 0, 51, 0.2) !important;
        border: 1px solid rgba(255, 0, 51, 0.5) !important;
        color: #ff3366 !important;
        border-radius: 8px !important;
        cursor: pointer;
        min-height: var(--mobile-touch-min) !important;
    }
    
    .details-grid {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
    }
    
    .details-column {
        width: 100% !important;
    }
    
    .detail-section {
        padding: 12px !important;
    }
    
    .detail-section h3 {
        font-size: 0.8rem !important;
    }
    
    .detail-item {
        font-size: 0.75rem !important;
        padding: 6px 0 !important;
    }
    
    #animal-description {
        font-size: 0.75rem !important;
        line-height: 1.6 !important;
    }
}

/* ============================================================================
 * BOTTOM BAR & GRID - Mobile Layout
 * Fixed positioning to avoid scroll issues and bottom nav overlap
 * Stack order (bottom to top): mobile-nav -> character-grid -> bottom-info-bar
 * ============================================================================ */
@media (max-width: 480px) {
    /* Character grid container - fixed position above mobile nav */
    /* Total height: 130px = grid-controls(28px) + grid-scroll-wrapper(~90px) + padding(~12px) */
    .character-grid-container {
        position: fixed !important;
        bottom: calc(var(--mobile-nav-height) + var(--mobile-safe-bottom)) !important;
        left: 0 !important;
        right: 0 !important;
        z-index: 7500 !important;
        min-height: 130px !important;
        max-height: 130px !important;
        height: 130px !important;
        padding: 4px 6px 2px 6px !important;
        margin-bottom: 0 !important;
        overflow: hidden !important;
        background: linear-gradient(180deg, rgba(5, 10, 20, 0.98) 0%, rgba(0, 8, 18, 1) 100%) !important;
        border-top: 1px solid rgba(0, 212, 255, 0.2) !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: flex-start !important;
        gap: 2px !important;
        animation: none !important;
        transform: none !important;
        box-sizing: border-box !important;
    }
    
    /* When menu is hidden */
    .character-grid-container.hidden {
        height: 0 !important;
        min-height: 0 !important;
        max-height: 0 !important;
        padding: 0 !important;
        border: none !important;
    }
    
    /* Bottom info bar - fixed position ABOVE character grid */
    .bottom-info-bar {
        position: fixed !important;
        bottom: calc(var(--mobile-nav-height) + var(--mobile-safe-bottom) + 130px) !important;
        left: 0 !important;
        right: 0 !important;
        z-index: 8000 !important;
        padding: 6px 8px !important;
        gap: 4px !important;
        flex-wrap: nowrap !important;
        justify-content: center !important;
        background: linear-gradient(180deg, rgba(5, 10, 20, 0.98), rgba(10, 15, 25, 0.99)) !important;
        border-top: 1px solid rgba(0, 212, 255, 0.3) !important;
        max-height: 36px !important;
        min-height: 36px !important;
    }
    
    /* When grid is hidden, move bottom bar down */
    .character-grid-container.hidden ~ .bottom-info-bar,
    body:has(.character-grid-container.hidden) .bottom-info-bar {
        bottom: calc(var(--mobile-nav-height) + var(--mobile-safe-bottom)) !important;
    }
    
    .bottom-info-bar button {
        padding: 6px 8px !important;
        font-size: 0.55rem !important;
        min-height: 28px !important;
        flex: 0 1 auto !important;
        min-width: auto !important;
        white-space: nowrap !important;
    }
    
    .bottom-info-bar button i {
        margin-right: 3px !important;
    }
    
    .info-separator {
        display: none !important;
    }
    
    /* Removed duplicate - main padding is defined earlier in the file */
    
    /* Character display area slightly expands when menu hidden - only goes down a little */
    .character-grid-container.hidden ~ .character-display-area,
    body:has(.character-grid-container.hidden) .character-display-area {
        flex: 0 0 auto !important;
        min-height: 280px !important;
        max-height: calc(100vh - 65px - var(--mobile-nav-height) - 36px - 50px - 20px) !important;
        height: calc(100vh - 65px - var(--mobile-nav-height) - 36px - 50px - 20px) !important;
    }
    
    /* Show grid controls on mobile - compact row */
    .grid-controls {
        display: flex !important;
        flex-wrap: nowrap !important;
        gap: 4px !important;
        padding: 0 2px !important;
        height: 28px !important;
        min-height: 28px !important;
        max-height: 28px !important;
        flex-shrink: 0 !important;
    }
    
    .search-box {
        flex: 1 !important;
        min-width: 60px !important;
        padding: 4px 8px !important;
        font-size: 0.7rem !important;
        height: 26px !important;
    }
    
    .dropdown-toggle-btn {
        padding: 4px 8px !important;
        font-size: 0.6rem !important;
        height: 26px !important;
        white-space: nowrap !important;
    }
    
    .dropdown-arrow {
        display: none !important;
    }
    
    /* Grid row wrapper - contains arrows and grid, fits within container */
    /* Container: 130px - controls(28px) - padding(6px) - gap(2px) = ~94px available */
    .grid-row-wrapper {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        flex: 0 0 auto !important;
        min-height: 78px !important;
        height: 78px !important;
        max-height: 78px !important;
        gap: 4px !important;
        padding: 0 !important;
        overflow: hidden !important;
        box-sizing: border-box !important;
        position: relative !important;
    }
    
    /* Arrow buttons - flex items, not absolute positioned on mobile */
    .grid-arrow {
        position: static !important;
        transform: none !important;
        width: 26px !important;
        min-width: 26px !important;
        height: 70px !important;
        font-size: 0.8rem !important;
        flex-shrink: 0 !important;
        z-index: 10 !important;
        background: rgba(0, 20, 40, 0.9) !important;
        border: 1px solid rgba(0, 212, 255, 0.3) !important;
        border-radius: 6px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        margin: 0 !important;
        top: auto !important;
        left: auto !important;
        right: auto !important;
    }
    
    /* Grid items - center aligned */
    .character-grid {
        gap: 4px !important;
        padding: 0 2px !important;
        flex: 1 1 auto !important;
        height: 74px !important;
        max-height: 74px !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        -webkit-overflow-scrolling: touch !important;
        scroll-behavior: auto !important;
        box-sizing: border-box !important;
    }
    
    /* Hide fade masks on mobile - they look like errors */
    .grid-fade-mask,
    .grid-fade-left,
    .grid-fade-right {
        display: none !important;
    }
    
    .character-card {
        width: 56px !important;
        height: 70px !important;
        flex-shrink: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: flex-start !important;
        padding: 2px !important;
        overflow: visible !important;
        box-sizing: border-box !important;
    }
    
    .character-card img {
        width: 42px !important;
        height: 42px !important;
        flex-shrink: 0 !important;
    }
    
    .card-name,
    .character-card-name {
        font-size: 0.5rem !important;
        padding: 2px 2px !important;
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
        max-width: 100% !important;
        width: 100% !important;
        text-align: center !important;
        line-height: 1.2 !important;
        margin-top: 2px !important;
        flex-shrink: 0 !important;
        min-height: 14px !important;
    }
    
    /* Dropdown panels - attached to body, positioned via JS */
    .dropdown-menu-container {
        position: relative !important;
        z-index: 100 !important;
    }
    
    .dropdown-panel {
        position: fixed !important;
        z-index: 99999 !important;
        max-width: calc(100vw - 20px) !important;
        min-width: 200px !important;
        max-height: 50vh !important;
        overflow-y: auto !important;
        background: rgba(10, 14, 26, 0.99) !important;
        border: 2px solid rgba(0, 212, 255, 0.6) !important;
        border-radius: 8px !important;
        padding: 10px !important;
        box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.9), 0 0 30px rgba(0, 0, 0, 0.8) !important;
        pointer-events: auto !important;
        display: none !important;
        flex-direction: column !important;
        gap: 8px !important;
    }
    
    .dropdown-panel.show {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
    
    .filter-panel-compact {
        width: auto !important;
        min-width: 220px !important;
        left: 0 !important;
        right: auto !important;
    }
    
    /* Sort panel - position from right */
    #sort-panel {
        left: auto !important;
        right: 0 !important;
    }
    
    /* Make sure dropdown toggle buttons are clickable */
    .dropdown-toggle-btn {
        pointer-events: auto !important;
        cursor: pointer !important;
        -webkit-tap-highlight-color: rgba(0, 212, 255, 0.3) !important;
        touch-action: manipulation !important;
    }
    
    .checkbox-option {
        padding: 10px 12px !important;
        min-height: var(--mobile-touch-min) !important;
        pointer-events: auto !important;
        cursor: pointer !important;
    }
    
    .filter-tab {
        padding: 8px 6px !important;
        font-size: 0.7rem !important;
        pointer-events: auto !important;
        cursor: pointer !important;
    }
}

/* ============================================================================
 * COMPARE PAGE - Mobile Layout
 * compare-page.css handles the 3-column layout
 * ============================================================================ */
@media (max-width: 480px) {
    /* Compare view needs padding for bottom fixed elements */
    #compare-view.active-view {
        padding-bottom: calc(var(--mobile-nav-height) + var(--mobile-safe-bottom) + 130px + 36px) !important;
        overflow: hidden !important;
    }
    
    /* Ensure fight-screen takes full available height */
    #compare-view .fight-screen {
        height: calc(100vh - 65px - var(--mobile-nav-height) - var(--mobile-safe-bottom) - 130px - 36px - 20px) !important;
    }
}

/* ============================================================================
 * RANKINGS PAGE - Mobile Layout
 * ============================================================================ */
@media (max-width: 480px) {
    /* Rankings view - prevent horizontal scroll */
    #rankings-view.active-view {
        padding-bottom: calc(var(--mobile-nav-height) + var(--mobile-safe-bottom)) !important;
        overflow-x: hidden !important;
        max-width: 100vw !important;
    }
    
    .rankings-console {
        padding: 8px !important;
        overflow-x: hidden !important;
        max-width: 100% !important;
    }
    
    /* Hero banner - fixed trophy layout */
    .rankings-hero-banner {
        padding: 16px 12px !important;
        margin-bottom: 12px !important;
        overflow: hidden !important;
    }
    
    .hero-top-row {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 8px !important;
        width: 100% !important;
    }
    
    /* Trophy badges on SIDES of title */
    .hero-trophy-badge {
        width: 28px !important;
        height: 28px !important;
        flex-shrink: 0 !important;
        order: unset !important;
    }
    
    .hero-trophy-badge:first-child {
        order: 1 !important;
    }
    
    .hero-title {
        font-size: 0.75rem !important;
        text-align: center !important;
        order: 2 !important;
        flex: 0 1 auto !important;
        white-space: nowrap !important;
    }
    
    .hero-trophy-badge.mirror {
        order: 3 !important;
    }
    
    .hero-trophy-badge i {
        font-size: 0.8rem !important;
    }
    
    .hero-play-btn-big {
        padding: 12px 28px !important;
        font-size: 0.85rem !important;
        min-height: var(--mobile-touch-min) !important;
        margin-top: 10px !important;
    }
    
    .hero-subtitle {
        font-size: 0.6rem !important;
        padding: 0 8px !important;
        display: none !important; /* Hide on mobile for cleaner look */
    }
    
    /* Main content - single column */
    .rankings-main-content {
        flex-direction: column !important;
        gap: 0 !important;
        overflow-x: hidden !important;
        max-width: 100% !important;
    }
    
    .rankings-list-column {
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: hidden !important;
    }
    
    .rankings-right-column {
        display: none !important;
    }
    
    /* Show detail panel as bottom sheet when animal selected */
    .rankings-right-column.mobile-visible {
        display: block !important;
        position: fixed !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        max-height: 70vh !important;
        z-index: 8500 !important;
        background: linear-gradient(180deg, rgba(10, 20, 35, 0.98) 0%, rgba(5, 10, 20, 0.99) 100%) !important;
        border-top: 2px solid rgba(0, 212, 255, 0.4) !important;
        border-radius: 20px 20px 0 0 !important;
        padding: 12px 16px !important;
        padding-bottom: calc(var(--mobile-nav-height) + var(--mobile-safe-bottom) + 16px) !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
        animation: slideUpSheet 0.3s ease-out;
    }
    
    @keyframes slideUpSheet {
        from { transform: translateY(100%); }
        to { transform: translateY(0); }
    }
    
    /* Drag handle for bottom sheet */
    .rankings-right-column.mobile-visible::before {
        content: '';
        display: block;
        width: 40px;
        height: 4px;
        background: rgba(255, 255, 255, 0.3);
        border-radius: 2px;
        margin: 0 auto 12px;
    }
    
    /* Mobile close button for bottom sheet - Red X style */
    .mobile-sheet-close {
        position: absolute !important;
        top: 8px !important;
        right: 10px !important;
        width: 34px !important;
        height: 34px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        background: rgba(255, 50, 50, 0.15) !important;
        border: 1px solid rgba(255, 50, 50, 0.4) !important;
        border-radius: 50% !important;
        color: #ff4444 !important;
        font-size: 1rem !important;
        cursor: pointer !important;
        z-index: 100 !important;
        transition: all 0.2s ease !important;
    }
    
    .mobile-sheet-close:hover,
    .mobile-sheet-close:active {
        background: rgba(255, 50, 50, 0.3) !important;
        border-color: #ff4444 !important;
        color: #ff6666 !important;
        transform: scale(1.05) !important;
    }
    
    /* Rankings list header */
    .rankings-list-toolbar {
        padding: 8px 10px !important;
    }
    
    .rankings-list-title {
        font-size: 0.8rem !important;
    }
    
    .rankings-list-header {
        padding: 6px 10px !important;
        font-size: 0.6rem !important;
        gap: 4px !important;
        display: none !important; /* Hide column headers on mobile */
    }
    
    /* Mobile Search Bar - Rankings - Compact */
    .rankings-mobile-search {
        display: flex !important;
        align-items: center !important;
        gap: 8px !important;
        padding: 6px 10px !important;
        margin: 0 4px 6px 4px !important;
        background: rgba(0, 20, 40, 0.7) !important;
        border: 1px solid rgba(0, 212, 255, 0.25) !important;
        border-radius: 8px !important;
    }
    
    .rankings-mobile-search i {
        color: rgba(0, 212, 255, 0.5) !important;
        font-size: 0.75rem !important;
        flex-shrink: 0 !important;
    }
    
    .rankings-mobile-search input {
        flex: 1 !important;
        background: transparent !important;
        border: none !important;
        outline: none !important;
        color: #fff !important;
        font-size: 14px !important;
        padding: 4px 0 !important;
    }
    
    .rankings-mobile-search input::placeholder {
        color: rgba(255, 255, 255, 0.35) !important;
        font-size: 0.8rem !important;
    }
    
    .rankings-search-wrapper.header-search {
        max-width: 100px !important;
    }
    
    .rankings-search-inline {
        font-size: 0.7rem !important;
        padding: 6px 8px !important;
    }
    
    /* Rankings list container - CRITICAL: vertical scroll only */
    .rankings-list {
        max-height: calc(100vh - 280px) !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        -webkit-overflow-scrolling: touch !important;
        overscroll-behavior-x: none !important;
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 4px !important;
    }
    
    /* ========================================
       RANKING ROW - Mobile Card Layout
       Fixed layout: Rank | Animal | Votes (no wrap)
       ======================================== */
    .ranking-row {
        display: grid !important;
        grid-template-columns: 38px 1fr auto !important;
        grid-template-rows: auto auto !important;
        align-items: center !important;
        padding: 8px 10px !important;
        gap: 6px 8px !important;
        margin-bottom: 6px !important;
        position: relative !important;
        overflow: hidden !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
    
    /* Remove skew transform on mobile */
    .ranking-row:hover {
        transform: none !important;
    }
    
    /* Disable diagonal ribbon on mobile - too cluttered */
    .ranking-row .row-diagonal-badge {
        display: none !important;
    }
    
    /* Row Rank - Grid column 1, spans both rows */
    .row-rank {
        grid-column: 1 !important;
        grid-row: 1 / 3 !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 2px !important;
    }
    
    .row-rank-num {
        font-size: 1rem !important;
    }
    
    .row-rank-icon {
        position: static !important;
        transform: none !important;
        font-size: 0.65rem !important;
    }
    
    .row-crown {
        position: static !important;
        transform: none !important;
        font-size: 0.7rem !important;
    }
    
    .row-streak-badge {
        font-size: 0.45rem !important;
        padding: 1px 3px !important;
    }
    
    /* Row Animal - Grid column 2, row 1 */
    .row-animal {
        grid-column: 2 !important;
        grid-row: 1 !important;
        display: flex !important;
        align-items: center !important;
        gap: 6px !important;
        overflow: hidden !important;
        min-width: 0 !important;
    }
    
    .row-animal-img {
        width: 40px !important;
        height: 40px !important;
        flex-shrink: 0 !important;
        border-radius: 6px !important;
        object-fit: contain !important;
        background: rgba(0, 0, 0, 0.4) !important;
    }
    
    .row-animal-info {
        flex: 1 1 auto !important;
        min-width: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 1px !important;
        overflow: hidden !important;
    }
    
    .row-animal-name-line {
        display: flex !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        gap: 4px !important;
        overflow: hidden !important;
    }
    
    .row-animal-name {
        font-size: 0.8rem !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        flex: 0 1 auto !important;
        min-width: 0 !important;
    }
    
    .row-elo-badge {
        font-size: 0.5rem !important;
        padding: 1px 4px !important;
        flex-shrink: 0 !important;
    }
    
    /* Hide inline status badge on mobile */
    .row-status-badge {
        display: none !important;
    }
    
    /* Tournament chips - smaller, horizontal */
    .row-tournament-chips {
        display: flex !important;
        gap: 4px !important;
        margin-top: 2px !important;
    }
    
    .tournament-chip {
        padding: 2px 4px !important;
        font-size: 0.5rem !important;
        transform: none !important;
        clip-path: none !important;
        border-radius: 3px !important;
    }
    
    .tournament-chip > * {
        transform: none !important;
    }
    
    .tournament-chip i {
        font-size: 0.45rem !important;
    }
    
    /* Row Win Rate - Grid columns 2-3, row 2 */
    .row-winrate {
        grid-column: 2 / 4 !important;
        grid-row: 2 !important;
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        gap: 6px !important;
        padding-top: 4px !important;
        margin-top: 2px !important;
        border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
    }
    
    .winrate-display {
        flex: 0 0 auto !important;
        display: flex !important;
        flex-direction: row !important;
        align-items: baseline !important;
        gap: 3px !important;
    }
    
    .row-winrate-value {
        font-size: 0.85rem !important;
        font-weight: 700 !important;
    }
    
    .row-battles {
        font-size: 0.6rem !important;
        color: rgba(255, 255, 255, 0.5) !important;
    }
    
    /* Win rate bar - horizontal, takes remaining space */
    .winrate-bar {
        flex: 1 1 auto !important;
        height: 5px !important;
        transform: none !important;
        border-radius: 3px !important;
        max-width: 100px !important;
    }
    
    .winrate-fill {
        border-radius: 3px !important;
    }
    
    /* Row Votes - Grid column 3, row 1 - ALWAYS on right */
    .row-votes {
        grid-column: 3 !important;
        grid-row: 1 !important;
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        gap: 3px !important;
        flex-shrink: 0 !important;
    }
    
    .row-votes.control-pad {
        gap: 3px !important;
    }
    
    .vote-pad-cluster {
        display: flex !important;
        flex-direction: row !important;
        padding: 1px !important;
        gap: 1px !important;
    }
    
    .vote-pad-cluster::before {
        display: none !important;
    }
    
    .row-vote-btn {
        padding: 5px 6px !important;
        font-size: 0.65rem !important;
        min-height: 28px !important;
        gap: 2px !important;
    }
    
    .row-vote-btn i {
        font-size: 0.7rem !important;
    }
    
    .vote-count {
        font-size: 0.6rem !important;
    }
    
    .row-comments-btn {
        padding: 5px 6px !important;
        font-size: 0.65rem !important;
        min-height: 28px !important;
    }
    
    .comment-count {
        font-size: 0.6rem !important;
    }
    
    /* Inline comments panel - mobile optimized */
    .inline-comments-panel {
        margin: 6px 0 !important;
        padding: 10px !important;
        border-radius: 8px !important;
    }
    
    .inline-comments-header {
        padding-bottom: 8px !important;
        margin-bottom: 8px !important;
    }
    
    .inline-comments-title {
        font-size: 0.75rem !important;
    }
    
    .inline-view-all-btn {
        font-size: 0.65rem !important;
        padding: 4px 8px !important;
    }
    
    .inline-comments-close {
        width: 28px !important;
        height: 28px !important;
    }
    
    .inline-comment-item {
        padding: 8px !important;
        gap: 8px !important;
    }
    
    .inline-comment-avatar {
        width: 28px !important;
        height: 28px !important;
        font-size: 0.7rem !important;
    }
    
    .inline-comment-author {
        font-size: 0.7rem !important;
    }
    
    .inline-comment-time {
        font-size: 0.55rem !important;
    }
    
    .inline-comment-text {
        font-size: 0.75rem !important;
    }
    
    .inline-comment-input-row {
        gap: 8px !important;
        padding-top: 8px !important;
    }
    
    .inline-panel-comment-input {
        font-size: 16px !important; /* Prevents zoom on iOS */
        padding: 10px 12px !important;
    }
    
    .inline-panel-send-btn {
        width: 40px !important;
        height: 40px !important;
    }

    /* Detail panel content */
    .detail-header-compact {
        padding: 12px !important;
        gap: 10px !important;
    }
    
    .detail-portrait-sm {
        width: 50px !important;
        height: 50px !important;
    }
    
    .detail-animal-name {
        font-size: 1rem !important;
    }
    
    .detail-rank-badge {
        font-size: 0.7rem !important;
    }
    
    .detail-grade-badge {
        width: 36px !important;
        height: 36px !important;
        font-size: 1rem !important;
    }
    
    .detail-stats-compact {
        gap: 8px !important;
        padding: 10px !important;
    }
    
    .stat-mini {
        padding: 8px !important;
    }
    
    .stat-mini i {
        font-size: 0.9rem !important;
    }
    
    .stat-val {
        font-size: 0.85rem !important;
    }
    
    .detail-physical-row {
        gap: 8px !important;
        padding: 8px !important;
    }
    
    .physical-stat {
        font-size: 0.7rem !important;
    }
    
    .detail-abilities-section {
        padding: 10px !important;
        gap: 8px !important;
    }
    
    .ability-tag-sm,
    .trait-tag-sm {
        font-size: 0.6rem !important;
        padding: 4px 8px !important;
    }
}

/* ============================================================================
 * TOURNAMENT / VOTING - Mobile Layout
 * ============================================================================ */
@media (max-width: 480px) {
    .tournament-modal-content {
        width: 100% !important;
        max-width: 100% !important;
        height: 100vh !important;
        max-height: 100vh !important;
        border-radius: 0 !important;
        padding: 16px !important;
        padding-top: calc(var(--mobile-safe-top) + 16px) !important;
        padding-bottom: calc(var(--mobile-safe-bottom) + 16px) !important;
    }
    
    .tournament-close-btn {
        top: calc(var(--mobile-safe-top) + 12px) !important;
        right: 12px !important;
        width: 40px !important;
        height: 40px !important;
    }
    
    .tournament-fighters {
        flex-direction: column !important;
        gap: 16px !important;
    }
    
    .tournament-fighter {
        width: 100% !important;
        max-width: 280px !important;
        margin: 0 auto !important;
    }
    
    .tournament-fighter-image {
        max-height: 120px !important;
    }
    
    .tournament-fighter-name {
        font-size: 1rem !important;
    }
    
    .tournament-vs {
        font-size: 1.5rem !important;
        padding: 8px 0 !important;
    }
    
    .tournament-stat-bar-container {
        padding: 8px !important;
    }
    
    .tournament-stat-bar {
        height: 10px !important;
    }
    
    .tournament-choose-btn {
        padding: 14px 24px !important;
        font-size: 0.9rem !important;
        min-height: var(--mobile-touch-min) !important;
    }
}

/* ============================================================================
 * COMMUNITY HUB TAB - Mobile Full-Width Fix (480px - 900px range)
 * When Hub tab is active, sidebar should be full width, not horizontal scroll
 * ============================================================================ */
@media (max-width: 900px) {
    /* Override community-page.css horizontal scroll layout when Hub tab is active */
    #community-view .community-sidebar-column.mobile-sidebar-active,
    #community-view .community__sidebar.mobile-sidebar-active {
        display: flex !important;
        flex-direction: column !important;
        position: fixed !important;
        top: calc(var(--mobile-header-height, 70px) + 56px) !important; /* Header + tab bar */
        left: 0 !important;
        right: 0 !important;
        bottom: calc(var(--mobile-nav-height, 60px) + var(--mobile-safe-bottom, 0px)) !important; /* Above bottom nav */
        width: 100% !important;
        max-width: 100% !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        padding: 16px !important;
        gap: 16px !important;
        background: rgba(8, 16, 28, 0.98) !important;
        z-index: 500 !important;
        align-items: stretch !important;
    }
    
    /* Children take full width when Hub tab is active */
    #community-view .community-sidebar-column.mobile-sidebar-active > *,
    #community-view .community__sidebar.mobile-sidebar-active > * {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        flex-shrink: 0 !important;
    }
    
    /* Show leaderboard on Hub tab (was hidden in community-page.css) */
    #community-view .community-sidebar-column.mobile-sidebar-active .leaderboard-module,
    #community-view .community__sidebar.mobile-sidebar-active .leaderboard-module {
        display: block !important;
    }
}

/* ============================================================================
 * COMMUNITY PAGE - Mobile Layout (Complete Redesign)
 * ============================================================================ */
@media (max-width: 480px) {
    /* Main community view - fullscreen chat-focused */
    #community-view.active-view {
        display: flex !important;
        flex-direction: column !important;
        height: 100vh !important;
        padding: 0 !important;
        padding-top: var(--mobile-header-height) !important;
        padding-bottom: calc(var(--mobile-nav-height) + var(--mobile-safe-bottom)) !important;
        overflow: hidden !important;
    }
    
    /* Layout becomes single column */
    .community-feed-layout,
    .community__layout {
        display: flex !important;
        flex-direction: column !important;
        flex: 1 !important;
        min-height: 0 !important;
        gap: 0 !important;
        padding: 0 !important;
        overflow: hidden !important;
    }
    
    /* Sidebar hidden by default - shown via mobile tab system */
    #community-view .community-sidebar-column,
    #community-view .community__sidebar,
    .community-sidebar-column,
    .community__sidebar {
        display: none !important;
        position: fixed !important;
        top: calc(var(--mobile-header-height) + 56px) !important; /* Below header + tabs */
        left: 0 !important;
        right: 0 !important;
        bottom: calc(var(--mobile-nav-height) + var(--mobile-safe-bottom)) !important;
        z-index: 500 !important;
        background: rgba(8, 16, 28, 0.98) !important;
        flex-direction: column !important;
        overflow-y: auto !important;
        padding: 12px !important;
        gap: 12px !important;
        width: 100% !important;
        box-sizing: border-box !important;
        align-items: stretch !important;
    }
    
    /* All modules inside sidebar should take full width */
    #community-view .community-sidebar-column > *,
    #community-view .community__sidebar > *,
    .community-sidebar-column > *,
    .community__sidebar > * {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 100% !important;
        box-sizing: border-box !important;
        flex-shrink: 0 !important;
    }
    
    /* When sidebar is active (via tab) */
    #community-view .community-sidebar-column.mobile-sidebar-active,
    #community-view .community__sidebar.mobile-sidebar-active,
    .community-sidebar-column.mobile-sidebar-active,
    .community__sidebar.mobile-sidebar-active {
        display: flex !important;
    }
    
    /* Main feed column takes full space */
    .community-feed-column {
        display: flex !important;
        flex-direction: column !important;
        flex: 1 !important;
        min-height: 0 !important;
        overflow: hidden !important;
        width: 100% !important;
    }
    
    /* Hide feed scroll region when viewing sidebar (keep tab bar visible) */
    .community-feed-column.mobile-feed-hidden .feed-scroll-region,
    .community-feed-column.mobile-feed-hidden .feed-compose-box {
        display: none !important;
    }
    
    /* Show mobile-only tabs */
    .community-tab-btn.mobile-only-tab {
        display: flex !important;
    }
    
    /* Show short tab labels on mobile */
    .community-tab-btn .tab-label {
        display: inline !important;
        font-size: 0.6rem !important;
    }
    
    /* Enhanced tab bar with more options for mobile */
    .community-tab-bar {
        position: sticky !important;
        top: 0 !important;
        z-index: 600 !important;
        display: flex !important;
        padding: 8px 10px !important;
        gap: 6px !important;
        background: linear-gradient(180deg, rgba(10, 20, 35, 0.99) 0%, rgba(8, 16, 28, 0.98) 100%) !important;
        border-bottom: 1px solid rgba(0, 212, 255, 0.2) !important;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.4) !important;
        flex-shrink: 0 !important;
    }
    
    /* Tab buttons - touch-friendly, horizontal layout */
    .community-tab-btn {
        flex: 1 !important;
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 12px 8px !important;
        font-size: 0.65rem !important;
        min-height: 44px !important;
        border-radius: 8px !important;
        background: rgba(255, 255, 255, 0.03) !important;
        border: 1px solid rgba(255, 255, 255, 0.08) !important;
        color: rgba(255, 255, 255, 0.5) !important;
        font-family: 'Orbitron', 'Rajdhani', sans-serif !important;
        text-transform: uppercase !important;
        letter-spacing: 0.3px !important;
        transition: all 0.2s ease !important;
        gap: 5px !important;
    }
    
    .community-tab-btn i {
        font-size: 0.85rem !important;
        margin: 0 !important;
    }
    
    .community-tab-btn.active {
        background: rgba(0, 212, 255, 0.12) !important;
        border-color: rgba(0, 212, 255, 0.4) !important;
        color: #00d4ff !important;
        box-shadow: 0 0 15px rgba(0, 212, 255, 0.15) !important;
    }
    
    .community-tab-btn.active i {
        filter: drop-shadow(0 0 4px currentColor) !important;
    }
    
    .community-tab-btn::after {
        display: none !important; /* Remove desktop underline indicator */
    }
    
    /* Feed scroll region */
    .feed-scroll-region {
        flex: 1 !important;
        min-height: 0 !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
        padding: 10px !important;
    }
    
    /* Feed posts container */
    .feed-posts-container {
        padding-bottom: 20px !important;
    }
    
    /* Composer section at bottom */
    .community-composer-section {
        position: sticky !important;
        bottom: 0 !important;
        background: linear-gradient(180deg, rgba(8, 16, 28, 0.95) 0%, rgba(10, 20, 35, 0.99) 100%) !important;
        border-top: 1px solid rgba(0, 212, 255, 0.2) !important;
        padding: 10px !important;
        flex-shrink: 0 !important;
    }
    
    /* Composer textarea */
    .composer-textarea {
        min-height: 60px !important;
        max-height: 120px !important;
        font-size: 16px !important; /* Prevent iOS zoom */
        padding: 12px !important;
    }
    
    /* Send button */
    .composer-send-btn {
        min-height: var(--mobile-touch-min) !important;
        min-width: var(--mobile-touch-min) !important;
        padding: 12px 16px !important;
    }
    
    /* HUD Module - compact card style */
    .community-hud-module {
        padding: 12px !important;
        border-radius: 10px !important;
    }
    
    .hud-header {
        padding: 8px 10px !important;
    }
    
    .hud-title {
        font-size: 0.75rem !important;
    }
    
    .hud-live-badges {
        gap: 10px !important;
        padding: 8px !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
    }
    
    .hud-online-badge,
    .hud-visits-badge {
        font-size: 0.7rem !important;
        padding: 6px 10px !important;
    }
    
    .hud-stats-grid {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 8px !important;
        padding: 10px !important;
    }
    
    .hud-stat-item {
        padding: 10px 6px !important;
    }
    
    .hud-stat-value {
        font-size: 1.1rem !important;
    }
    
    .hud-stat-label {
        font-size: 0.55rem !important;
    }
    
    /* Daily matchup - hide by default, enable via HUD tab */
    .daily-matchup-module {
        display: block !important;
        padding: 12px !important;
        border-radius: 10px !important;
    }
    
    .module-header {
        padding: 8px 10px !important;
    }
    
    .module-title {
        font-size: 0.75rem !important;
    }
    
    .matchup-timer {
        font-size: 0.7rem !important;
        padding: 4px 8px !important;
    }
    
    .matchup-arena {
        flex-direction: row !important;
        gap: 8px !important;
        padding: 12px 8px !important;
        align-items: stretch !important;
    }
    
    .matchup-fighter {
        flex-direction: column !important;
        align-items: center !important;
        gap: 6px !important;
        flex: 1 !important;
        text-align: center !important;
    }
    
    .matchup-fighter-img {
        width: 60px !important;
        height: 60px !important;
    }
    
    .matchup-fighter-name {
        font-size: 0.7rem !important;
    }
    
    .matchup-vs {
        font-size: 1rem !important;
        padding: 4px !important;
        align-self: center !important;
    }
    
    .matchup-vote-bar {
        width: 100% !important;
        height: 6px !important;
    }
    
    .matchup-pct {
        font-size: 0.8rem !important;
    }
    
    .matchup-vote-btn {
        padding: 10px 12px !important;
        font-size: 0.65rem !important;
        min-height: var(--mobile-touch-min) !important;
        width: 100% !important;
    }
    
    /* Leaderboard - show in sidebar tab */
    .leaderboard-module {
        display: block !important;
        padding: 12px !important;
        border-radius: 10px !important;
    }
    
    .leaderboard-list {
        max-height: none !important;
    }
    
    .leaderboard-item {
        padding: 10px 12px !important;
    }
    
    /* Chat messages - optimized for touch */
    .chat-message,
    .feed-post-item {
        padding: 12px !important;
        margin-bottom: 8px !important;
    }
    
    .chat-message-avatar,
    .post-avatar {
        width: 36px !important;
        height: 36px !important;
    }
    
    .chat-message-content,
    .post-content {
        font-size: 0.9rem !important;
        line-height: 1.4 !important;
    }
    
    .chat-message-meta,
    .post-meta {
        font-size: 0.65rem !important;
    }
    .leaderboard-module {
        padding: 12px !important;
    }
    
    .leaderboard-list {
        gap: 6px !important;
    }
    
    .leaderboard-item {
        padding: 10px 12px !important;
        gap: 8px !important;
    }
    
    .leaderboard-rank {
        font-size: 0.75rem !important;
        min-width: 24px !important;
    }
    
    .leaderboard-avatar {
        width: 32px !important;
        height: 32px !important;
    }
    
    .leaderboard-name {
        font-size: 0.75rem !important;
    }
    
    .leaderboard-xp {
        font-size: 0.65rem !important;
    }
    
    /* Feed area */
    .feed-scroll-region {
        padding: 8px !important;
    }
    
    .feed-posts-container {
        gap: 10px !important;
    }
    
    /* Chat/comment posts */
    .feed-post,
    .chat-message,
    .comment-card {
        padding: 12px !important;
    }
    
    .post-avatar,
    .message-avatar {
        width: 32px !important;
        height: 32px !important;
    }
    
    .post-username,
    .message-username {
        font-size: 0.75rem !important;
    }
    
    .post-timestamp,
    .message-timestamp {
        font-size: 0.6rem !important;
    }
    
    .post-content,
    .message-content {
        font-size: 0.8rem !important;
        line-height: 1.5 !important;
    }
    
    /* Compose box sticky */
    .feed-compose-box {
        position: sticky !important;
        bottom: 0 !important;
        padding: 12px !important;
        background: linear-gradient(180deg, rgba(10, 20, 35, 0.95) 0%, rgba(5, 10, 20, 0.98) 100%) !important;
        border-top: 1px solid rgba(0, 212, 255, 0.2) !important;
        flex-shrink: 0 !important;
    }
    
    .compose-input-row {
        gap: 8px !important;
    }
    
    .compose-avatar {
        width: 32px !important;
        height: 32px !important;
        font-size: 0.8rem !important;
    }
    
    .compose-input {
        padding: 12px !important;
        font-size: 0.85rem !important;
        min-height: var(--mobile-touch-min) !important;
    }
    
    .compose-send-btn {
        width: 44px !important;
        height: 44px !important;
    }
    
    .compose-reply-preview {
        padding: 8px 10px !important;
        font-size: 0.7rem !important;
    }
}

/* ============================================================================
 * LOGIN / SIGNUP / PROFILE PAGES - Mobile Layout
 * ============================================================================ */
@media (max-width: 480px) {
    #login-view,
    #signup-view {
        padding: var(--mobile-padding) !important;
        padding-top: calc(var(--mobile-safe-top) + 60px) !important;
        padding-bottom: calc(var(--mobile-safe-bottom) + var(--mobile-padding)) !important;
    }
    
    /* Profile page - needs header clearance and bottom padding */
    #profile-view {
        padding: var(--mobile-padding) !important;
        padding-top: calc(var(--mobile-header-height) + 20px) !important;
        padding-bottom: calc(var(--mobile-safe-bottom) + 30px) !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }
    
    /* Profile page content wrapper */
    .abs-profile-page {
        padding-bottom: 20px !important;
    }
    
    /* Profile sidebar (left column) */
    .abs-sidebar {
        width: 100% !important;
        padding-bottom: 16px !important;
    }
    
    /* Logout panel needs extra bottom margin */
    .abs-logout-panel {
        margin-bottom: 30px !important;
    }
    
    /* Logout button - make more prominent and touch-friendly */
    .abs-logout-btn {
        width: 100% !important;
        padding: 16px 24px !important;
        font-size: 1rem !important;
        min-height: 54px !important;
        margin-bottom: 20px !important;
    }
    
    .auth-container,
    .auth-card,
    .profile-card {
        width: 100% !important;
        max-width: 100% !important;
        padding: 20px 16px !important;
    }
    
    .auth-logo {
        width: 60px !important;
        height: 60px !important;
    }
    
    .auth-title {
        font-size: 1.2rem !important;
    }
    
    .auth-subtitle {
        font-size: 0.75rem !important;
    }
    
    .form-group label {
        font-size: 0.75rem !important;
    }
    
    .form-input,
    .auth-input {
        padding: 14px 16px !important;
        font-size: 16px !important; /* Prevents iOS zoom */
        min-height: var(--mobile-touch-min) !important;
    }
    
    .auth-btn,
    .form-submit-btn {
        padding: 14px 20px !important;
        font-size: 0.9rem !important;
        min-height: 50px !important;
    }
    
    .discord-btn {
        padding: 14px 20px !important;
        font-size: 0.85rem !important;
    }
    
    .auth-footer {
        font-size: 0.75rem !important;
    }
    
    /* Profile page */
    .profile-header {
        flex-direction: column !important;
        gap: 16px !important;
        text-align: center !important;
    }
    
    .profile-avatar-large {
        width: 80px !important;
        height: 80px !important;
    }
    
    .profile-username {
        font-size: 1.3rem !important;
    }
    
    .profile-stats-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px !important;
    }
    
    .profile-stat-card {
        padding: 12px !important;
    }
    
    .profile-stat-value {
        font-size: 1.2rem !important;
    }
    
    .profile-stat-label {
        font-size: 0.65rem !important;
    }
}

/* ============================================================================
 * MODALS & OVERLAYS - Mobile Layout
 * ============================================================================ */
@media (max-width: 480px) {
    .modal,
    .overlay,
    .popup {
        padding: var(--mobile-padding) !important;
    }
    
    .modal-content,
    .popup-content {
        width: 100% !important;
        max-width: 100% !important;
        max-height: calc(100vh - 100px) !important;
        border-radius: 16px !important;
    }
    
    .modal-close-btn,
    .popup-close {
        width: 40px !important;
        height: 40px !important;
        min-height: var(--mobile-touch-min) !important;
    }
    
    /* Comments modal - must be above tournament modal (z-index 2000) */
    .comments-modal {
        z-index: 100000 !important;
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
    }
    
    .comments-modal-content {
        width: 100% !important;
        height: 100% !important;
        max-height: 100% !important;
        border-radius: 0 !important;
        display: flex !important;
        flex-direction: column !important;
    }
    
    .comments-list {
        padding: 12px !important;
        flex: 1 !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
        max-height: none !important;
    }
    
    .comments-scroll-area {
        flex: 1 !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }
    
    .comment-input-area {
        padding: 12px !important;
        padding-bottom: calc(var(--mobile-safe-bottom) + 12px) !important;
        flex-shrink: 0 !important;
    }
    
    .comment-input {
        padding: 12px !important;
        font-size: 16px !important;
    }
}

/* ============================================================================
 * UTILITY CLASSES FOR MOBILE
 * ============================================================================ */
@media (max-width: 480px) {
    /* Hide on mobile */
    .hide-mobile {
        display: none !important;
    }
    
    /* Show only on mobile */
    .show-mobile {
        display: block !important;
    }
    
    .show-mobile-flex {
        display: flex !important;
    }
    
    /* Touch-friendly padding */
    .touch-padding {
        padding: 12px !important;
    }
    
    /* Full width on mobile */
    .full-mobile {
        width: 100% !important;
        max-width: 100% !important;
    }
    
    /* Stack on mobile */
    .stack-mobile {
        flex-direction: column !important;
    }
    
    /* Center on mobile */
    .center-mobile {
        justify-content: center !important;
        align-items: center !important;
        text-align: center !important;
    }
}

/* ============================================================================
 * ACCESSIBILITY & PERFORMANCE
 * ============================================================================ */
@media (max-width: 480px) {
    /* Reduce animations on mobile for performance */
    @media (prefers-reduced-motion: reduce) {
        *,
        *::before,
        *::after {
            animation-duration: 0.01ms !important;
            animation-iteration-count: 1 !important;
            transition-duration: 0.01ms !important;
        }
    }
    
    /* Better focus indicators for touch */
    button:focus-visible,
    a:focus-visible,
    input:focus-visible,
    select:focus-visible {
        outline: 2px solid #00d4ff !important;
        outline-offset: 2px !important;
    }
    
    /* Prevent text size adjustment */
    body {
        -webkit-text-size-adjust: 100%;
        text-size-adjust: 100%;
    }
}

/* ============================================================================
 * TOURNAMENT PAGE - Mobile Layout
 * Full-screen immersive tournament experience
 * ============================================================================ */
@media (max-width: 480px) {
    /* Hide header, nav, and stats quick-info-bar when tournament is active */
    body.tournament-active .game-header,
    body.tournament-active .mobile-bottom-nav,
    body.tournament-active .quick-info-bar:not(.t-quick-info) {
        display: none !important;
    }
    
    /* Tournament modal - true full screen */
    .tournament-modal {
        z-index: 10000 !important;
    }
    
    /* CRITICAL: Modal should NOT use flex to prevent side-by-side screens */
    .tournament-modal.show {
        display: block !important;
        position: fixed !important;
        inset: 0 !important;
        overflow: hidden !important;
    }
    
    /* Each screen takes full viewport and uses position absolute */
    /* Only the visible one (not display:none) will show */
    /* IMPORTANT: Do NOT use display: flex !important here - it overrides inline display:none */
    .tournament-setup,
    .tournament-battle,
    .tournament-results {
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        width: 100% !important;
        height: 100% !important;
    }
    
    /* Hide screens that should be hidden (respect inline styles) */
    .tournament-battle[style*="display: none"],
    .tournament-results[style*="display: none"] {
        display: none !important;
    }
    
    /* Match intro overlay - above everything */
    .match-intro-overlay {
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        z-index: 10100 !important;
    }
    
    /* ========================================
       SETUP SCREEN - Mobile Optimized
       ======================================== */
    /* Note: Don't override display - let JS control visibility */
    .tournament-setup {
        padding: 0 !important;
        /* When visible, use flex for centering */
        align-items: flex-start !important;
        justify-content: flex-start !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }
    
    .t-setup-container {
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        min-height: auto !important;
        max-height: none !important;
        border-radius: 0 !important;
        border: none !important;
        padding: 16px !important;
        padding-top: calc(16px + env(safe-area-inset-top, 0px)) !important;
        padding-bottom: calc(100px + env(safe-area-inset-bottom, 0px)) !important;
        display: flex !important;
        flex-direction: column !important;
        overflow: visible !important;
        gap: 16px !important;
    }
    
    /* Close button - larger touch target */
    .t-close-btn {
        position: absolute !important;
        top: calc(12px + env(safe-area-inset-top, 0px)) !important;
        right: 16px !important;
        width: 44px !important;
        height: 44px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        font-size: 1.5rem !important;
        z-index: 10 !important;
    }
    
    /* Header compact */
    .t-setup-header {
        margin-bottom: 8px !important;
        padding-top: 10px !important;
        flex-shrink: 0 !important;
    }
    
    .t-crown-icon {
        font-size: 1.5rem !important;
    }
    
    .t-title-banner {
        padding: 6px 20px !important;
    }
    
    .t-title-banner span {
        font-size: 1.2rem !important;
        letter-spacing: 2px !important;
    }
    
    /* Grid becomes vertical stack */
    .t-setup-grid {
        display: flex !important;
        flex-direction: column !important;
        gap: 12px !important;
        flex: none !important;
        min-height: 0 !important;
    }
    
    .t-setup-panel {
        padding: 12px !important;
        flex-shrink: 0 !important;
    }
    
    .t-panel-header {
        margin-bottom: 12px !important;
    }
    
    .t-step-badge {
        width: 24px !important;
        height: 24px !important;
        font-size: 0.8rem !important;
    }
    
    .t-panel-title {
        font-size: 0.9rem !important;
    }
    
    /* Bracket cards - 2x2 grid, larger touch targets */
    .t-bracket-grid {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 8px !important;
    }
    
    .t-bracket-card {
        padding: 12px 10px !important;
        min-height: 60px !important;
    }
    
    .t-bracket-num {
        font-size: 1.6rem !important;
    }
    
    .t-bracket-label {
        font-size: 0.65rem !important;
    }
    
    .t-bracket-tag {
        top: -5px !important;
        right: -5px !important;
        font-size: 0.5rem !important;
        padding: 2px 5px !important;
    }
    
    /* Filter chips - show all, page scrolls instead */
    .t-filter-chips {
        max-height: none !important;
        min-height: auto !important;
        gap: 8px !important;
        padding: 4px !important;
        overflow: visible !important;
    }
    
    .t-chip {
        padding: 10px 14px !important;
        font-size: 0.8rem !important;
        min-height: 40px !important;
    }
    
    /* Filter search */
    .t-filter-search {
        margin-bottom: 10px !important;
    }
    
    .t-filter-search input {
        font-size: 1rem !important;
        padding: 8px !important;
    }
    
    /* Footer - fixed at bottom */
    .t-setup-footer {
        flex-direction: column !important;
        gap: 12px !important;
        padding: 14px !important;
        margin-top: 16px !important;
        flex-shrink: 0 !important;
        position: fixed !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        background: linear-gradient(180deg, rgba(10, 14, 26, 0.95), rgba(10, 14, 26, 1)) !important;
        border-top: 1px solid rgba(255, 215, 0, 0.3) !important;
        border-radius: 0 !important;
        z-index: 100 !important;
        padding-bottom: calc(14px + env(safe-area-inset-bottom, 0px)) !important;
    }
    
    .t-summary {
        justify-content: center !important;
        flex-wrap: wrap !important;
        gap: 8px !important;
    }
    
    .t-summary-item {
        font-size: 0.8rem !important;
    }
    
    .t-start-btn {
        width: 100% !important;
        justify-content: center !important;
        padding: 14px 24px !important;
        font-size: 1rem !important;
        min-height: 48px !important;
    }
    
    .t-login-note {
        font-size: 0.75rem !important;
        margin-top: 8px !important;
        text-align: center !important;
        padding-bottom: 80px !important; /* Space for fixed footer */
    }
    
    /* ========================================
       BATTLE SCREEN - Mobile Layout
       Layout: Header → Animals+VS → Guess Bar → Stat Bars → Info Panels
       ======================================== */
    .tournament-battle {
        width: 100% !important;
        height: 100% !important;
        display: flex !important;
        flex-direction: column !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }
    
    /* Sticky battle header */
    .t-battle-header {
        padding: 8px 12px !important;
        padding-top: calc(8px + env(safe-area-inset-top, 0px)) !important;
        height: auto !important;
        min-height: 44px !important;
        flex-shrink: 0 !important;
        position: sticky !important;
        top: 0 !important;
        z-index: 100 !important;
        background: var(--bg-primary, #0a0a0f) !important;
    }
    
    .t-battle-progress {
        gap: 8px !important;
    }
    
    .t-round-name {
        font-size: 0.7rem !important;
        letter-spacing: 1px !important;
    }
    
    .t-progress-bar {
        width: 80px !important;
        height: 4px !important;
    }
    
    .t-match-info {
        font-size: 0.65rem !important;
    }
    
    .t-quit-btn {
        padding: 6px 12px !important;
        font-size: 0.7rem !important;
    }
    
    /* ====== ANIMALS ROW - Side by Side with VS ====== */
    .t-battle-main {
        flex: 1 1 auto !important; /* Fill available vertical space */
        display: flex !important;
        flex-direction: row !important;
        align-items: stretch !important; /* Stretch children to fill height */
        justify-content: center !important;
        padding: 4px 8px !important;
        gap: 0 !important;
        overflow: visible !important;
        min-height: 0 !important;
    }
    
    /* Fighter cards - stretch to fill, CONTAIN images */
    .t-fighter-card {
        flex: 1 1 auto !important;
        width: 42% !important;
        max-width: 42% !important;
        min-width: 120px !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: flex-start !important;
        padding: 6px 4px 8px 4px !important;
        overflow: hidden !important; /* Contain images */
        position: relative !important;
        /* Reset tap/focus effects to prevent lingering glow */
        -webkit-tap-highlight-color: transparent !important;
        outline: none !important;
    }
    
    /* Clear focus state that could cause lingering glow */
    .t-fighter-card:focus,
    .t-fighter-card:active {
        outline: none !important;
        -webkit-tap-highlight-color: transparent !important;
    }
    
    .t-fighter-card.left { order: 1 !important; }
    .t-fighter-card.right { order: 3 !important; }
    
    /* VS Badge center column */
    .t-battle-center {
        order: 2 !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 0 4px !important;
        min-width: 50px !important;
        max-width: 60px !important;
        flex-shrink: 0 !important;
    }
    
    /* VS Badge */
    .t-vs-section {
        width: 50px !important;
        height: 50px !important;
    }
    
    .t-vs-badge {
        width: 45px !important;
        height: 45px !important;
    }
    
    .t-vs-badge span {
        font-size: 1rem !important;
    }
    
    .t-vs-burst,
    .t-vs-diamond-outer,
    .t-vs-stripes {
        display: none !important;
    }
    
    /* HIDE these in center - show in bottom band */
    .t-battle-center .t-guess-vote-row,
    .t-battle-center .t-guess-section,
    .t-battle-center .t-community-vote,
    .t-radar-container {
        display: none !important;
    }
    
    /* Animal names */
    .t-identity-top {
        text-align: center !important;
        width: 100% !important;
        padding-top: 2px !important;
    }
    
    .t-name {
        font-size: 0.85rem !important; /* Bigger name */
        font-weight: 700 !important;
        white-space: normal !important;
        overflow: visible !important;
        text-overflow: clip !important;
        margin-bottom: 2px !important;
        max-width: 100% !important;
        line-height: 1.15 !important;
        word-wrap: break-word !important;
    }
    
    .t-scientific {
        display: none !important;
    }
    
    /* Record badge - bigger, can overlap image */
    .t-record-badge {
        transform: scale(0.75) !important; /* Bigger */
        transform-origin: center top !important;
        margin-bottom: -12px !important;
        position: relative !important;
        z-index: 10 !important;
    }
    
    /* Hero image - fill space but NEVER overflow bottom */
    .t-hero-image {
        flex: 1 1 auto !important;
        width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: 100% !important; /* Never exceed card bounds */
        margin: 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        position: relative !important;
        cursor: pointer !important;
        z-index: 5 !important;
        overflow: hidden !important; /* Clip any overflow */
    }
    
    .t-hero-image img {
        max-width: 100% !important;
        max-height: 100% !important; /* Fill available space */
        width: auto !important;
        height: auto !important;
        object-fit: contain !important;
        display: block !important;
        filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.5)) !important;
    }
    
    .t-click-hint {
        display: none !important;
    }
    
    /* Quick-info - hidden in fighter cards on mobile */
    .t-fighter-card .t-quick-info {
        display: none !important;
    }
    
    /* Rating change - overlay at bottom of hero image */
    .t-rating-change {
        position: absolute !important;
        bottom: 4px !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
        padding: 4px 10px !important;
        margin: 0 !important;
        background: rgba(0, 0, 0, 0.9) !important;
        border-radius: 6px !important;
        z-index: 10 !important;
        white-space: nowrap !important;
        display: none !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 6px !important;
        opacity: 0 !important;
        animation: none !important;
    }
    
    .t-rating-change.show {
        display: flex !important;
        opacity: 1 !important;
        animation: none !important;
    }
    
    .t-rating-delta {
        font-size: 0.85rem !important;
        font-weight: bold !important;
    }
    
    .t-rating-calc {
        font-size: 0.55rem !important;
    }
    
    /* ====== BOTTOM BAND - Guess + Stats + Info ====== */
    .t-bottom-band {
        display: flex !important;
        flex-direction: column !important;
        padding: 0 10px 10px !important;
        padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px)) !important;
        gap: 6px !important;
        flex-shrink: 0 !important;
    }
    
    /* ====== MOBILE GUESS SECTION - Clean Design ====== */
    .mobile-guess-section {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        gap: 10px !important;
        padding: 8px 12px !important;
        background: linear-gradient(180deg, rgba(20, 25, 40, 0.95) 0%, rgba(15, 18, 30, 0.98) 100%) !important;
        border: 1px solid rgba(100, 120, 180, 0.25) !important;
        border-radius: 10px !important;
        cursor: pointer !important;
        transition: all 0.2s ease !important;
        flex-shrink: 0 !important;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3) !important;
    }

    .mobile-guess-section:hover {
        border-color: rgba(100, 150, 255, 0.4) !important;
    }

    .mobile-guess-section.active {
        background: linear-gradient(180deg, rgba(40, 35, 20, 0.95) 0%, rgba(30, 25, 15, 0.98) 100%) !important;
        border-color: rgba(255, 200, 100, 0.4) !important;
        box-shadow: 0 0 15px rgba(255, 180, 50, 0.15) !important;
    }

    .mobile-guess-section.active .guess-label {
        color: #ffc832 !important;
    }

    .mobile-guess-section.active .guess-label i {
        color: #ffd700 !important;
    }
    
    .mobile-guess-section .guess-header {
        display: none !important;
    }
    
    /* Guess label styling */
    .mobile-guess-section .guess-label {
        font-size: 0.55rem !important;
        font-weight: 600 !important;
        color: rgba(255, 255, 255, 0.7) !important;
        letter-spacing: 0.5px !important;
        text-transform: uppercase !important;
        text-align: left !important;
        transition: color 0.2s ease !important;
        flex-shrink: 0 !important;
        white-space: pre-line !important;
        line-height: 1.3 !important;
        min-width: 70px !important;
        max-width: 80px !important;
    }

    .mobile-guess-section .guess-label i {
        margin-right: 4px !important;
        color: rgba(150, 150, 200, 0.7) !important;
    }
    
    /* Vote bar section - inline compact */
    .mobile-guess-section .vote-bar-section {
        display: flex !important;
        flex-direction: column !important;
        gap: 4px !important;
        flex: 1 !important;
        min-width: 0 !important;
    }
    
    .mobile-guess-section .vote-stats-row {
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        width: 100% !important;
    }

    .mobile-guess-section .vote-pct {
        font-size: 0.7rem !important;
        font-weight: 700 !important;
        min-width: 30px !important;
    }
    
    .mobile-guess-section .vote-pct.left {
        color: #00c8ff !important;
        text-align: left !important;
    }
    
    .mobile-guess-section .vote-pct.right {
        color: #ff7744 !important;
        text-align: right !important;
    }
    
    .mobile-guess-section .vote-total {
        font-size: 0.5rem !important;
        color: rgba(255, 255, 255, 0.45) !important;
        text-transform: uppercase !important;
        letter-spacing: 0.5px !important;
    }
    
    /* MOBILE VOTE BAR */
    .mobile-guess-section .t-vote-bar {
        height: 6px !important;
        padding: 0 !important;
        background: rgba(0, 0, 0, 0.5) !important;
        border-radius: 3px !important;
        border: 1px solid rgba(255, 255, 255, 0.08) !important;
        position: relative !important;
    }
    
    /* Mobile guess result animations - scale down text */
    .mobile-guess-section .t-vote-bar.guess-win::before,
    .mobile-guess-section .t-vote-bar.guess-lose::before {
        font-size: 0.85rem !important;
        padding: 6px 14px !important;
    }
    
    /* Mobile guess section glow */
    .mobile-guess-section.guess-win-section {
        background: linear-gradient(135deg, rgba(46, 213, 115, 0.2), rgba(39, 174, 96, 0.15)) !important;
        border-color: rgba(46, 213, 115, 0.5) !important;
        box-shadow: 0 0 15px rgba(46, 213, 115, 0.3) !important;
    }
    
    .mobile-guess-section.guess-lose-section {
        background: linear-gradient(135deg, rgba(255, 71, 87, 0.2), rgba(192, 57, 43, 0.15)) !important;
        border-color: rgba(255, 71, 87, 0.5) !important;
        box-shadow: 0 0 15px rgba(255, 71, 87, 0.3) !important;
    }

    /* ====== STAT BARS ====== */
    .t-stats-compact {
        padding: 0 !important;
        gap: 2px !important;
    }
    
    .t-stat-row-compact {
        gap: 4px !important;
    }
    
    .t-stat-center-cluster {
        padding: 4px 6px !important;
        min-width: 60px !important;
        gap: 3px !important;
        background: rgba(255, 255, 255, 0.05) !important;
        border-radius: 6px !important;
    }
    
    .t-stat-center-cluster .t-val {
        font-size: 0.7rem !important;
        font-weight: 700 !important;
        min-width: 18px !important;
    }
    
    .t-stat-center-cluster .t-val.left {
        color: var(--neon-blue, #00d4ff) !important;
    }
    
    .t-stat-center-cluster .t-val.right {
        color: var(--neon-orange, #ff6b35) !important;
    }
    
    .t-stat-icon-label {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        gap: 0 !important;
    }
    
    .t-stat-icon-label i {
        font-size: 0.5rem !important;
        opacity: 0.6 !important;
    }
    
    .t-stat-abbr {
        display: block !important;
        font-size: 0.4rem !important;
        opacity: 0.7 !important;
    }
    
    .t-stats-compact .t-stat-bar-left,
    .t-stats-compact .t-stat-bar-right {
        height: 8px !important;
    }
    
    .t-stats-compact .stat-bar {
        height: 100% !important;
        border-radius: 4px !important;
    }
    
    .t-stats-compact .t-stat-bar-left .stat-bar-fill {
        background: linear-gradient(90deg, var(--neon-blue, #00d4ff), #0099cc) !important;
    }
    
    .t-stats-compact .t-stat-bar-right .stat-bar-fill {
        background: linear-gradient(90deg, #cc5522, var(--neon-orange, #ff6b35)) !important;
    }
    
    /* ====== INFO PANELS - Side by Side, FIXED HEIGHT ====== */
    .t-info-panels-row {
        display: flex !important;
        gap: 6px !important;
        width: 100% !important;
        flex-shrink: 0 !important;
    }
    
    /* Info panels - FIXED HEIGHT to always reach bottom */
    .t-bottom-band .t-info-panel {
        display: flex !important;
        flex-direction: column !important;
        flex: 1 !important;
        padding: 4px !important;
        gap: 2px !important;
        background: rgba(255, 255, 255, 0.02) !important;
        border: 1px solid rgba(255, 255, 255, 0.08) !important;
        border-radius: 6px !important;
        min-width: 0 !important;
        max-width: 50% !important;
        overflow: hidden !important;
        min-height: 75px !important; /* Fixed minimum height */
    }
    
    /* Hide quick-info in info panels (moved to fighter cards via JS) */
    /* Quick-info in info panels - MUST override global .quick-info-bar fixed positioning */
    /* Using body.tournament-active for highest specificity */
    body.tournament-active .t-info-panel .quick-info-bar,
    body.tournament-active .t-bottom-band .quick-info-bar,
    body.tournament-active .quick-info-bar.t-quick-info,
    .t-bottom-band .t-info-panel .t-quick-info,
    .t-info-panel .t-quick-info,
    .t-info-panel .quick-info-bar.t-quick-info,
    .quick-info-bar.t-quick-info {
        position: static !important;
        display: flex !important;
        flex-direction: row !important;
        justify-content: center !important;
        align-items: center !important;
        gap: 4px !important;
        padding: 4px !important;
        background: rgba(255, 255, 255, 0.03) !important;
        border-radius: 4px !important;
        margin-bottom: 4px !important;
        /* Reset all fixed positioning properties */
        left: auto !important;
        right: auto !important;
        bottom: auto !important;
        top: auto !important;
        transform: none !important;
        z-index: auto !important;
        width: 100% !important;
        max-width: none !important;
        border: none !important;
        /* Flex properties for children */
        flex-wrap: nowrap !important;
    }
    
    .t-info-panel .quick-info-item {
        flex: 1 !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 1px !important;
        padding: 2px !important;
        min-width: 0 !important;
        position: relative !important;
    }
    
    .t-info-panel .quick-info-item.clickable {
        cursor: pointer !important;
        border-radius: 4px !important;
        transition: background 0.2s ease !important;
    }
    
    .t-info-panel .quick-info-item.clickable:hover {
        background: rgba(255, 255, 255, 0.1) !important;
    }
    
    .t-info-panel .quick-info-item.clickable:active {
        background: rgba(0, 212, 255, 0.2) !important;
    }
    
    .t-info-panel .quick-info-item > i:first-child {
        font-size: 0.5rem !important;
        opacity: 0.7 !important;
    }
    
    .t-info-panel .quick-info-item span {
        font-size: 0.55rem !important; /* Bigger for readability */
        font-weight: 700 !important;
        white-space: nowrap !important;
        text-align: center !important;
    }
    
    .t-info-panel .quick-info-item .toggle-icon {
        font-size: 0.35rem !important;
        opacity: 0.4 !important;
        transition: transform 0.3s ease, opacity 0.2s ease !important;
    }
    
    .t-info-panel .quick-info-item.clickable:hover .toggle-icon {
        opacity: 0.8 !important;
        transform: rotate(180deg) !important;
    }
    
    /* Abilities & Traits - compact, limit to 2 each */
    .t-info-panel .t-tags {
        display: flex !important;
        flex-direction: column !important;
        gap: 1px !important;
        flex: 0 0 auto !important;
        max-height: none !important;
        overflow: hidden !important;
    }
    
    .t-info-panel .t-abilities-section,
    .t-info-panel .t-traits-section {
        display: flex !important;
        flex-direction: column !important;
        gap: 1px !important;
    }
    
    .t-info-panel .abilities-label,
    .t-info-panel .traits-label {
        font-size: 0.42rem !important; /* BIGGER title */
        opacity: 0.7 !important;
        letter-spacing: 0.3px !important;
        flex-shrink: 0 !important;
        margin: 0 !important;
        font-weight: 600 !important;
    }
    
    .t-info-panel .abilities-tags-compact,
    .t-info-panel .traits-tags-compact {
        display: flex !important;
        flex-wrap: nowrap !important;
        gap: 2px !important;
        overflow: hidden !important;
    }
    
    /* Show only first 2 tags */
    .t-info-panel .abilities-tags-compact .ability-tag-sm:nth-child(n+3),
    .t-info-panel .traits-tags-compact .trait-tag-sm:nth-child(n+3) {
        display: none !important;
    }
    
    .t-info-panel .ability-tag-sm,
    .t-info-panel .trait-tag-sm {
        padding: 2px 4px !important;
        font-size: 0.55rem !important;
        border-radius: 3px !important;
        white-space: nowrap !important;
        flex-shrink: 1 !important;
        min-width: 0 !important;
    }
    
    /* Container for abilities/traits - ensure proper layout */
    .t-info-panel .abilities-tags-compact,
    .t-info-panel .traits-tags-compact {
        display: flex !important;
        flex-wrap: nowrap !important;
        gap: 3px !important;
        overflow: hidden !important;
        max-width: 100% !important;
    }
    
    /* Tournament record - very compact */
    .t-info-panel .t-tournament-dashboard {
        padding: 3px !important;
        background: rgba(255, 255, 255, 0.02) !important;
        flex-shrink: 0 !important;
        border-radius: 4px !important;
    }
    
    .t-info-panel .dashboard-header {
        margin-bottom: 2px !important;
        padding: 0 !important;
    }
    
    .t-info-panel .dashboard-title {
        font-size: 0.45rem !important; /* Bigger */
        font-weight: 600 !important;
    }
    
    .t-info-panel .dashboard-accent-left,
    .t-info-panel .dashboard-accent-right {
        display: none !important;
    }
    
    .t-info-panel .dashboard-content {
        padding: 0 !important;
    }
    
    .t-info-panel .medal-row {
        display: flex !important;
        gap: 2px !important;
    }
    
    .t-info-panel .medal-card {
        flex: 1 !important;
        padding: 2px !important;
        min-width: 0 !important;
        flex-direction: row !important;
        gap: 2px !important;
    }
    
    .t-info-panel .medal-icon-wrap {
        width: 12px !important;
        height: 12px !important;
    }
    
    .t-info-panel .medal-icon-wrap i {
        font-size: 0.4rem !important;
    }
    
    .t-info-panel .medal-info {
        gap: 0 !important;
    }
    
    .t-info-panel .medal-count {
        font-size: 0.6rem !important; /* Bigger */
        font-weight: 700 !important;
    }
    
    .t-info-panel .medal-label {
        font-size: 0.3rem !important; /* Slightly bigger */
    }
    
    /* Action buttons - very compact */
    .t-info-panel .t-action-row {
        display: flex !important;
        gap: 2px !important;
        margin-top: 2px !important;
    }
    
    .t-info-panel .row-vote-btn,
    .t-info-panel .row-comments-btn {
        flex: 1 !important;
        padding: 3px 2px !important;
        font-size: 0.5rem !important;
        min-width: 0 !important;
        gap: 1px !important;
    }
    
    .t-info-panel .row-vote-btn i,
    .t-info-panel .row-comments-btn i {
        font-size: 0.5rem !important;
    }
    
    .t-info-panel .vote-count,
    .t-info-panel .comment-count {
        font-size: 0.45rem !important;
    }
    
    .t-info-panel .t-details-btn {
        flex: 1 !important; /* Same flex as other buttons */
        min-width: 30px !important;
        padding: 3px 4px !important;
        font-size: 0.5rem !important;
    }
    
    /* Details overlay */
    .t-details-overlay {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        z-index: 1000 !important;
        background: rgba(0, 0, 0, 0.95) !important;
        padding: 16px !important;
        overflow-y: auto !important;
    }
    /* ========================================
       MATCH INTRO ANIMATION - Mobile
       ======================================== */ */
    .match-intro-overlay {
        z-index: 10100 !important;
    }
    
    .intro-content {
        flex-direction: row !important; /* HORIZONTAL */
        gap: 10px !important;
        padding: 12px !important;
        align-items: center !important;
        justify-content: center !important;
    }
    
    /* Fighter plates - side by side */
    .intro-fighter-plate {
        flex-direction: column !important;
        min-width: 0 !important;
        max-width: 45% !important;
        flex: 1 !important;
        padding: 12px !important;
    }
    
    .intro-fighter-plate.left {
        animation-name: introSlideLeft !important;
    }
    
    .intro-fighter-plate.right {
        animation-name: introSlideRight !important;
    }
    
    .intro-fighter-image-wrap {
        width: 90px !important;
        height: 90px !important;
    }
    
    .intro-fighter-image {
        width: 80px !important;
        height: 80px !important;
    }
    
    .intro-fighter-glow {
        width: 100px !important;
        height: 100px !important;
    }
    
    .intro-fighter-name {
        font-size: 0.9rem !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        max-width: 100% !important;
    }
    
    .intro-fighter-scientific {
        font-size: 0.6rem !important;
        display: none !important; /* Hide to save space */
    }
    
    /* VS in center */
    .intro-vs-container {
        width: 70px !important;
        height: 70px !important;
        flex-shrink: 0 !important;
        order: 0 !important; /* Keep in middle */
        position: absolute !important;
        left: 50% !important;
        top: 50% !important;
        transform: translate(-50%, -50%) !important;
        z-index: 10 !important;
    }
    
    .intro-vs-badge {
        width: 65px !important;
        height: 65px !important;
        overflow: visible !important;
    }
    
    .intro-vs-badge span {
        font-size: 1.6rem !important;
        font-weight: 700 !important;
        color: #ffffff !important;
        text-shadow: 
            2px 2px 0 #000,
            -1px -1px 0 #000,
            1px -1px 0 #000,
            -1px 1px 0 #000,
            0 0 20px rgba(255, 255, 255, 0.9) !important;
        visibility: visible !important;
        opacity: 1 !important;
        z-index: 10 !important;
    }
    
    .intro-vs-burst {
        width: 100px !important;
        height: 100px !important;
    }
    
    /* ========================================
       RESULTS SCREEN - Mobile
       ======================================== */
    /* Note: Don't set display here - let inline styles control visibility */
    .tournament-results {
        padding: 0 !important;
        /* When visible, it will use flex from base CSS */
        align-items: center !important;
        justify-content: center !important;
    }
    
    .t-results-container {
        width: 100% !important;
        max-width: 100% !important;
        height: 100% !important;
        max-height: 100% !important;
        border-radius: 0 !important;
        border: none !important;
        padding: 16px !important;
        padding-top: calc(16px + env(safe-area-inset-top, 0px)) !important;
        padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px)) !important;
        gap: 16px !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }
    
    /* Champion section */
    .t-champion-section {
        padding: 0 !important;
    }
    
    .t-crown-burst {
        font-size: 2rem !important;
    }
    
    .t-champion-banner {
        padding: 8px 20px !important;
    }
    
    .t-champion-banner span {
        font-size: 1.3rem !important;
        letter-spacing: 3px !important;
    }
    
    .t-champion-card {
        padding: 16px !important;
    }
    
    .t-champion-img {
        width: 120px !important;
        height: 120px !important;
    }
    
    .t-champion-name {
        font-size: 1.1rem !important;
    }
    
    .t-champion-stats {
        gap: 20px !important;
    }
    
    .t-champ-val {
        font-size: 1.1rem !important;
    }
    
    .t-champ-label {
        font-size: 0.6rem !important;
    }
    
    /* Results row - stack */
    .t-results-row {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }
    
    .t-stats-panel,
    .t-podium-panel {
        padding: 12px !important;
    }
    
    .t-stats-title,
    .t-podium-title {
        font-size: 0.85rem !important;
    }
    
    .t-stats-grid {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 8px !important;
    }
    
    .t-stat-item {
        padding: 8px !important;
    }
    
    .t-stat-value {
        font-size: 1rem !important;
    }
    
    .t-stat-label {
        font-size: 0.55rem !important;
    }
    
    /* Podium compact */
    .t-podium-grid {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 8px !important;
    }
    
    .t-podium-card {
        padding: 8px !important;
    }
    
    .t-podium-pos {
        font-size: 0.5rem !important;
    }
    
    .t-podium-img {
        width: 45px !important;
        height: 45px !important;
    }
    
    .t-podium-name {
        font-size: 0.6rem !important;
    }
    
    /* Bonus display */
    .t-bonus-display {
        gap: 16px !important;
        padding: 12px !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
    }
    
    .t-bonus-item {
        font-size: 0.85rem !important;
    }
    
    /* Action buttons - stack */
    .t-results-actions {
        flex-direction: column !important;
        gap: 10px !important;
    }
    
    .t-action-btn {
        width: 100% !important;
        justify-content: center !important;
        padding: 14px 20px !important;
        font-size: 0.9rem !important;
        min-height: 48px !important;
    }
    
    /* Guess result overlay */
    .t-guess-result {
        font-size: 0.8rem !important;
        padding: 10px 20px !important;
        border-radius: 30px !important;
    }
    
    .t-guess-result i {
        font-size: 1.1rem !important;
    }
}