/* Mobile Optimization CSS - Fast, Responsive, Touch-Friendly */

/* Base Mobile Optimizations */
* {
  -webkit-tap-highlight-color: rgba(106, 183, 255, 0.2);
  -webkit-touch-callout: none;
}

html {
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
}

/* Note: Do not override global button/chip sizes by default.
   If you want larger touch targets on a specific container,
   wrap it with a .touch-target class and the rules below will apply there only. */
.touch-target button,
.touch-target .btn,
.touch-target a.btn,
.touch-target input[type="button"],
.touch-target input[type="submit"] {
  min-height: 44px;
  padding: 12px 16px;
  touch-action: manipulation;
}

.touch-target .chip,
.touch-target .filter-chip {
  min-height: 32px;
  padding: 6px 12px;
  touch-action: manipulation;
}

/* Mobile Navigation Fixes - All phones including iPhone 15 Pro Max (430px width) */
/* Using 932px to cover all phones and tablets, plus pointer:coarse for touch devices */
@media (max-width: 932px), (pointer: coarse) {
  /* Hide any desktop nav remnants on phones */
  .ah-nav, .topnav { display:none !important; height:0 !important; padding:0 !important; border:0 !important; }
  /* PERFORMANCE MODE: No animations or transitions on phones */
  *, *::before, *::after { transition: none !important; animation: none !important; animation-duration: 0s !important; }
  
  /* Allow sidebar transitions */
  .sidebar, .sidebar * {
    transition: left 0.3s ease, opacity 0.3s ease !important;
  }

  /* Remove heavy page backgrounds and overlays on mobile */
  body::before, body::after, .ah-bg, #bg { display: none !important; background: none !important; }
  body { background-image: none !important; }

  /* Disable backdrop blur and reduce shadows for glass components */
  .glass-panel,
  .deck-panel,
  .glass-card,
  .glass-toolbar,
  .glass-modal,
  .glass-btn,
  .glass-btn-danger,
  .glass-input,
  .glass-badge {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    box-shadow: 0 2px 6px rgba(0,0,0,.25) !important;
    background: rgba(17,26,34,.92) !important;
  }

  /* Lighter layout to improve speed */
  .filtersBar, .classBar { position: static !important; box-shadow: none !important; }
  
  /* Hide filters and classBar by default on mobile - they'll be in the mobile panel */
  .filtersBar:not(.mFiltersBar),
  #classBar.classBar {
    display: none !important;
  }
  
  /* Show filters button in mobile header - ALWAYS visible on mobile */
  .mobile-header .filters-btn {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
  }
  
  /* Override any inline styles that hide the filters button */
  .mobile-header .filters-btn[style*="display: none"],
  .mobile-header .filters-btn[style*="display:none"] {
    display: flex !important;
  }
  
  /* Hide filters button if there's no filters panel on the page */
  /* Deck dashboard has its own deck-specific filters, not general card filters */
  body:not(:has(#mobileFiltersPanel)):not(:has(.filtersBar)) .mobile-header .filters-btn,
  /* Hide on deck dashboard since it doesn't use general card filters */
  body:has(.dashboard-grid) .mobile-header .filters-btn {
    display: none !important;
  }
  
  /* Ensure filters panel is always on top when open */
  body.filters-open #mobileFiltersPanel {
    z-index: 13000 !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
  }
  
  /* Ensure filter button works - make it more prominent */
  .mobile-header .filters-btn {
    z-index: 11001 !important;
    position: relative !important;
  }
  
  /* Ensure main content starts right after mobile header */
  .main-content {
    padding-top: 0 !important;
    margin-top: 0 !important;
  }
  
  /* Sidebar Navigation - Completely hidden off-screen when closed */
  .sidebar {
    width: 100% !important;
    max-width: 280px !important;
    position: fixed !important;
    left: -100% !important; /* Completely off-screen */
    top: 0 !important;
    height: 100vh !important;
    transition: left 0.3s ease, opacity 0.3s ease !important;
    z-index: 12000 !important; /* Higher than backdrop */
    transform: translateX(0) !important;
    box-shadow: none !important;
    border: none !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }
  
  .sidebar.open,
  .sidebar.active { 
    left: 0 !important;
    opacity: 1 !important;
    pointer-events: auto !important;
  }
  
  /* Mobile Menu Button */
  .mobile-menu-btn {
    display: flex !important;
    position: fixed;
    top: 15px;
    left: 15px;
    z-index: 10000;
    background: rgba(16, 22, 28, 0.9);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    padding: 10px;
    color: #fff;
    font-size: 24px;
    width: 44px;
    height: 44px;
    align-items: center;
    justify-content: center;
  }
  
  /* Backdrop - Lighter and less blurry, BEHIND sidebar */
  .sidebar-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.3);
    z-index: 11000 !important; /* Lower than sidebar */
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    pointer-events: auto !important; /* Allow clicking to close */
  }
  
  .sidebar-backdrop.active,
  .sidebar.open ~ .sidebar-backdrop {
    display: block;
  }
  
  /* Main Content Spacing */
  .main-content { 
    margin-left: 0 !important; 
    margin-right: 0 !important;
    padding: 0 0 60px 0 !important; 
    width: 100vw !important; 
    max-width: 100vw !important;
    box-sizing: border-box;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    height: calc(100vh - 56px) !important; /* Subtract mobile header height */
  }
  
  /* Ensure no elements are positioned on the left side */
  .main-content > *:not(.grid) {
    margin-left: 0 !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
  }
  
  /* Grid has its own padding for horizontal scroll */
  .grid {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  
  /* Ensure the sidebar opens with our existing JS (.open class) */
  .sidebar.open { transform: translateX(0) !important; left: 0 !important; }
  
  /* Container Widths */
  .container,
  .campaigns-container,
  .wrap {
    max-width: 100% !important;
    padding: 15px !important;
  }
  
  /* Card Grids - ALL grids use horizontal scrolling on mobile - ENFORCED */
  /* EXCEPT: Deck dashboard grids should stack vertically, not scroll horizontally */
  #grid,
  .grid:not(.dashboard-grid):not(.stats-grid):not(.form-grid),
  .campaigns-grid,
  .investigator-grid,
  .expansion-grid,
  .deck-grid:not(.dashboard-grid),
  .cards-grid,
  [class*="grid"]:not(.stats-grid):not(.form-grid):not(.dashboard-grid),
  [class*="Grid"]:not(.stats-grid):not(.form-grid):not(.dashboard-grid),
  [id*="grid"]:not(.dashboard-grid) {
    display: flex !important;
    flex-direction: row !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    scroll-snap-type: x mandatory !important;
    gap: 16px !important;
    padding: 12px 16px !important;
    margin: 12px 0 !important;
    width: 100% !important;
    max-width: 100vw !important;
    box-sizing: border-box !important;
    scrollbar-width: thin;
    scrollbar-color: rgba(106, 183, 255, 0.5) rgba(255, 255, 255, 0.1);
    justify-content: flex-start !important;
    align-items: center !important;
    /* Center first card when there's only one or few cards */
    scroll-padding: 0 50% !important;
    /* Override any grid display */
    grid-template-columns: none !important;
    grid-template-rows: none !important;
  }
  
  /* Center cards when there are few items */
  #grid:not(:has(.card:nth-child(3))),
  .grid:not(:has(.card:nth-child(3))),
  .cards-grid:not(:has(.card:nth-child(3))) {
    justify-content: center !important;
  }
  
  /* Deck Dashboard - NO horizontal scrolling, stack vertically */
  .dashboard-grid,
  .main-content .dashboard-grid,
  .wrap .dashboard-grid {
    display: flex !important;
    flex-direction: column !important;
    overflow-x: hidden !important;
    overflow-y: visible !important;
    gap: 12px !important;
    padding: 0 !important;
    margin: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
  
  /* When content overflows, allow scrolling from start */
  #grid:has(.card:nth-child(4)),
  .grid:has(.card:nth-child(4)),
  .cards-grid:has(.card:nth-child(4)) {
    justify-content: flex-start !important;
  }
  
  /* Override any inline styles or grid-template-columns */
  #grid[style*="grid"],
  .grid[style*="grid"],
  .campaigns-grid[style*="grid"],
  .investigator-grid[style*="grid"] {
    display: flex !important;
    grid-template-columns: none !important;
    grid-template-rows: none !important;
  }
  
  /* All cards in grids - fixed width for horizontal scroll, centered and bigger */
  /* EXCEPT: Deck dashboard cards should be full width */
  #grid .card,
  .grid:not(.dashboard-grid) .card,
  .campaigns-grid .card,
  .investigator-grid .card,
  .expansion-grid .card,
  .deck-grid:not(.dashboard-grid) .card,
  .cards-grid .card,
  [class*="grid"]:not(.dashboard-grid) .card,
  [class*="Grid"]:not(.dashboard-grid) .card,
  [id*="grid"]:not(.dashboard-grid) .card,
  .card:not(.dashboard-grid .card) {
    flex: 0 0 auto !important;
    width: 320px !important;
    max-width: 320px !important;
    min-width: 320px !important;
    scroll-snap-align: center !important;
    display: block !important;
    margin: 0 auto !important;
  }
  
  /* Deck dashboard cards - full width, no fixed width */
  .dashboard-grid .card,
  .dashboard-grid .deck-panel,
  .dashboard-grid section {
    flex: 1 1 auto !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    display: block !important;
  }
  
  /* Investigator cards - also horizontal scroll, bigger and centered */
  .investigator-card,
  .campaign-card,
  .expansion-card,
  .deck-card {
    flex: 0 0 auto !important;
    width: 320px !important;
    max-width: 320px !important;
    min-width: 320px !important;
    scroll-snap-align: center !important;
  }
  
  /* Scrollbar styling for all horizontal grids */
  .grid::-webkit-scrollbar,
  .campaigns-grid::-webkit-scrollbar,
  .investigator-grid::-webkit-scrollbar,
  .expansion-grid::-webkit-scrollbar {
    height: 4px;
  }
  
  .grid::-webkit-scrollbar-track,
  .campaigns-grid::-webkit-scrollbar-track,
  .investigator-grid::-webkit-scrollbar-track,
  .expansion-grid::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 2px;
  }
  
  .grid::-webkit-scrollbar-thumb,
  .campaigns-grid::-webkit-scrollbar-thumb,
  .investigator-grid::-webkit-scrollbar-thumb,
  .expansion-grid::-webkit-scrollbar-thumb {
    background: rgba(106, 183, 255, 0.5);
    border-radius: 2px;
  }
  
  .grid::-webkit-scrollbar-thumb:hover,
  .campaigns-grid::-webkit-scrollbar-thumb:hover,
  .investigator-grid::-webkit-scrollbar-thumb:hover,
  .expansion-grid::-webkit-scrollbar-thumb:hover {
    background: rgba(106, 183, 255, 0.7);
  }

  /* Ensure My Decks list uses horizontal scroll too */
  #yourDecks {
    display: flex !important;
    flex-direction: row !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    scroll-snap-type: x mandatory !important;
    gap: 12px !important;
    padding: 12px !important;
    margin: 12px 0 !important;
    width: 100% !important;
    max-width: 100vw !important;
    box-sizing: border-box !important;
  }
  
  #yourDecks .investigator-card,
  #yourDecks a.investigator-card {
    flex: 0 0 auto !important;
    width: 280px !important;
    max-width: 280px !important;
    min-width: 280px !important;
    scroll-snap-align: start !important;
    height: auto !important;
  }

  /* Deck Dashboard layout - also horizontal scroll */
  .deck-grid { 
    display: flex !important;
    flex-direction: row !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    scroll-snap-type: x mandatory !important;
    gap: 12px !important;
    padding: 12px !important;
  }
  
  .deck-grid > * {
    flex: 0 0 auto !important;
    width: 280px !important;
    min-width: 280px !important;
    scroll-snap-align: start !important;
  }
  .deck-panel, .glass-panel { width:100% !important; }
  .deck-panel * { max-width: 100% !important; }
  .deck-header { flex-direction: column !important; align-items: flex-start !important; gap: 8px !important; }
  .deck-actions { width:100% !important; flex-wrap: wrap !important; gap:8px !important; justify-content:flex-start !important; }
  .deck-meta { width:100% !important; }
  .deck-info { width:100% !important; }
  .dashboard-grid { display:block !important; }
  .dashboard-grid > * { width:100% !important; grid-column: auto !important; }
  .stats-grid { grid-template-columns: 1fr 1fr !important; gap: 10px !important; }
  @media (max-width: 374px) { .stats-grid { grid-template-columns: 1fr !important; } }
  
  /* Tables - Make Scrollable */
  table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  
  /* Forms */
  .form-grid {
    grid-template-columns: 1fr !important;
  }
  
  input,
  select,
  textarea,
  .form-input,
  .form-select {
    font-size: 16px !important; /* Prevents zoom on iOS */
    width: 100% !important;
  }
  
  /* Buttons - Stack Vertically */
  .campaign-actions,
  .card-actions,
  .form-actions {
    flex-direction: column !important;
    gap: 8px !important;
  }
  
  /* Exception: log-actions in header should stay inline */
  .log-header-right .log-actions {
    flex-direction: row !important;
    width: auto !important;
    gap: 6px !important;
  }
  
  .campaign-actions button,
  .campaign-actions a {
    width: 100% !important;
  }
  
  /* Filter Chips - Wrap Better */
  .filterGroup,
  .toolbar,
  .activity-filter-btn {
    flex-wrap: wrap !important;
    gap: 8px !important;
  }
  /* Make filters fully responsive to screen width */
  .filtersBar, .filtersBar * { max-width: 100% !important; }
  .filtersBar .filterGroup, .filtersBar .filterInputs { width: 100% !important; min-width: 0 !important; display: flex; flex-wrap: wrap; }
  
  /* Modals */
  .modal,
  #upgradeModal,
  #addCardModal {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100vw !important;
    max-width: 100vw !important;
    height: 100vh !important;
    max-height: 100vh !important;
    margin: 0 !important;
    padding: 0 !important;
    transform: none !important;
    overflow: hidden !important;
  }
  /* Hard enforce full-screen upgrade modal on phones */
  #upgradeModal { inset: 0 !important; padding: 0 !important; background: rgba(0,0,0,0.9) !important; }
  #upgradeModal > div { width:100% !important; height:100% !important; border-radius: 0 !important; }
  #upgradeModal > div { height:100% !important; max-height:100% !important; border-radius: 12px 12px 0 0 !important; }
  #upgradeModal [style*="max-height:320px"] { max-height: 40vh !important; }
  #currentDeckCardsList { max-height: 40vh !important; }
  
  .modal-content {
    max-height: 80vh;
    overflow-y: auto;
  }
  
  /* Deck Cards List */
  .card-list {
    max-height: 400px !important;
  }
  
  /* Stats Grid */
  .stats-grid,
  .deck-stats {
    grid-template-columns: 1fr 1fr !important;
  }
  
  /* Campaign Cards */
  .campaign-card {
    padding: 15px !important;
  }
  
  .campaign-meta {
    grid-template-columns: 1fr 1fr !important;
    font-size: 13px !important;
  }
  
  /* Log Entries */
  .log-entry {
    padding: 12px !important;
  }
  
  .log-header {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 8px !important;
  }
  
  .log-actions {
    width: 100%;
    justify-content: flex-start !important;
  }
  
  /* Text Sizes */
  h1 {
    font-size: 24px !important;
  }
  
  h2 {
    font-size: 20px !important;
  }
  
  h3 {
    font-size: 18px !important;
  }
  
  .section-title {
    font-size: 18px !important;
  }
  
  /* Deck Dashboard Specific */
  .deck-header {
    flex-direction: column !important;
    text-align: center !important;
  }
  
  .deck-portrait {
    width: 100% !important;
    max-width: 200px !important;
    height: auto !important;
    margin: 0 auto 15px auto !important;
  }
  
  .deck-grid {
    grid-template-columns: 1fr !important;
  }
  
  /* Participant Grid */
  .participants-grid {
    grid-template-columns: 1fr !important;
  }
  
  /* Investigator Cards */
  .investigator-card {
    width: 100% !important;
    max-width: 100% !important;
  }
  
  /* Hide Desktop-Only Elements */
  .desktop-only {
    display: none !important;
  }
  
  /* Panel Padding */
  .panel,
  .glass-panel,
  .log-section {
    padding: 15px !important;
    margin-bottom: 15px !important;
  }
}

/* Tablet Breakpoint - Only apply when NOT a phone (iPhone 15 Pro Max is 430px) */
@media (min-width: 933px) and (max-width: 1024px) {
  .sidebar {
    width: 220px;
  }
  
  .main-content {
    margin-left: 220px;
    padding: 30px;
  }
  
  .grid,
  .campaigns-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  
  .stats-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

/* Small Mobile Phones (< 375px) */
@media (max-width: 374px) {
  .campaign-meta,
  .stats-grid {
    grid-template-columns: 1fr !important;
  }
  
  button,
  .btn {
    font-size: 14px !important;
    padding: 10px 12px !important;
  }
  
  .chip {
    font-size: 12px !important;
    padding: 6px 10px !important;
  }
}

/* Performance Optimizations */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Loading States */
.loading {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100px;
  color: rgba(255, 255, 255, 0.6);
}

.loading::after {
  content: '...';
  animation: dots 1.5s steps(4, end) infinite;
}

@keyframes dots {
  0%, 20% { content: '.'; }
  40% { content: '..'; }
  60%, 100% { content: '...'; }
}

/* Prevent Layout Shift */
img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* Smooth Scrolling on Mobile */
body {
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-y: none;
}

/* Better Touch Scrolling */
.logs-list,
.card-list,
.scroll-container {
  -webkit-overflow-scrolling: touch;
  overflow-y: auto;
  overscroll-behavior: contain;
}

  /* Fix dropdown/select styling for Windows */
  select {
    background: rgba(0,0,0,0.8) !important;
    color: #e8f4fd !important;
    border: 1px solid rgba(255,255,255,0.2) !important;
    border-radius: 6px !important;
    padding: 8px 10px !important;
    font-size: 14px !important;
  }
  
  select option {
    background: rgba(0,0,0,0.9) !important;
    color: #e8f4fd !important;
    padding: 8px !important;
  }
  
  select:focus {
    border-color: #6ab7ff !important;
    outline: none !important;
    box-shadow: 0 0 0 2px rgba(106,183,255,0.2) !important;
  }

  /* Prevent Zoom on Input Focus (iOS) */
@media screen and (max-width: 932px), (pointer: coarse) {
  select:focus,
  textarea:focus,
  input:focus {
    font-size: 16px !important;
  }
}

/* Landscape Mode Optimizations */
@media (max-width: 932px) and (orientation: landscape), ((pointer: coarse) and (orientation: landscape)) {
  .main-content {
    padding-top: 50px !important;
  }
  
  .modal,
  #upgradeModal,
  #addCardModal {
    max-height: 95vh !important;
  }
  
  .deck-portrait {
    max-width: 150px !important;
  }
}

/* Additional Mobile Enhancements for Consistency - iPhone 15 Pro Max and all phones */
/* Using 932px to cover all phones and tablets, plus pointer:coarse for touch devices */
@media (max-width: 932px), (pointer: coarse) {
  /* Mobile Header - Ensure it exists on all pages */
  /* Professional Mobile Header - Consistent across all pages */
  /* Override any desktop styles that hide the mobile header */
  .mobile-header {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
    position: sticky !important;
    top: 0 !important;
    z-index: 11000 !important;
    background: rgba(17, 26, 34, 0.98) !important;
    backdrop-filter: blur(20px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12) !important;
    padding: 12px 16px !important;
    padding-left: max(16px, env(safe-area-inset-left)) !important;
    padding-right: max(16px, env(safe-area-inset-right)) !important;
    padding-top: max(12px, env(safe-area-inset-top)) !important;
    margin: 0 !important;
    width: 100% !important;
    box-sizing: border-box !important;
    min-height: 56px !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15) !important;
  }
  
  .mobile-header .menu-btn {
    font-size: 22px !important;
    line-height: 1 !important;
    padding: 10px 14px !important;
    background: rgba(255, 255, 255, 0.1) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    color: #ffffff !important;
    border-radius: 8px !important;
    cursor: pointer !important;
    min-width: 44px !important;
    min-height: 44px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    touch-action: manipulation !important;
    transition: all 0.2s ease !important;
    flex-shrink: 0 !important;
  }
  
  .mobile-header .menu-btn:active {
    background: rgba(255, 255, 255, 0.15) !important;
    transform: scale(0.95) !important;
  }
  
  .mobile-header .brand {
    display: inline-flex !important;
    align-items: center !important;
    gap: 10px !important;
    color: #ffffff !important;
    font-weight: 700 !important;
    text-decoration: none !important;
    flex: 1 !important;
    overflow: hidden !important;
    min-width: 0 !important;
  }
  
  .mobile-header .brand img {
    height: 28px !important;
    width: auto !important;
    flex-shrink: 0 !important;
    object-fit: contain !important;
  }
  
  .mobile-header .brand span {
    font-size: 17px !important;
    font-weight: 600 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    color: #ffffff !important;
    letter-spacing: 0.3px !important;
  }
  
  .mobile-header .filters-btn {
    padding: 10px 16px !important;
    background: rgba(106, 183, 255, 0.15) !important;
    border: 1px solid rgba(106, 183, 255, 0.3) !important;
    color: #b3d9ff !important;
    border-radius: 8px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    min-height: 44px !important;
    min-width: 70px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    white-space: nowrap !important;
    touch-action: manipulation !important;
    transition: all 0.2s ease !important;
    flex-shrink: 0 !important;
  }
  
  .mobile-header .filters-btn:hover {
    background: rgba(106, 183, 255, 0.2) !important;
    border-color: rgba(106, 183, 255, 0.4) !important;
  }
  
  .mobile-header .filters-btn:active {
    background: rgba(106, 183, 255, 0.25) !important;
    transform: scale(0.95) !important;
  }
  
  /* PERMANENTLY hide Filters button on ALL pages on phones - user request */
  .mobile-header .filters-btn,
  .mobile-header #mobileFiltersBtn {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    width: 0 !important;
    height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    pointer-events: none !important;
  }
  
  /* Page Headers */
  .page-header,
  .page-title {
    font-size: 22px !important;
    padding: 16px !important;
  }
  
  .page-subtitle {
    font-size: 14px !important;
  }
  
  /* Expansion Cards */
  .expansion-card,
  .expansion-grid {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
  
  /* Profile Page */
  .profile-container,
  .profile-header {
    padding: 12px !important;
  }
  
  /* Rules Page */
  .rules-container {
    padding: 8px !important;
  }
  
  .rules-content {
    padding: 12px !important;
    font-size: 14px !important;
  }
  
  /* Settings Page */
  .settings-container {
    padding: 12px !important;
  }
  
  .settings-panel {
    padding: 16px !important;
  }
  
  /* Campaign Log */
  .log-container {
    padding: 8px !important;
  }
  
  /* Card Images - Responsive */
  .card img,
  .investigator-card img,
  .campaign-card img {
    width: 100% !important;
    height: auto !important;
    max-width: 100% !important;
  }
  
  /* Text Content */
  p, li, td, th {
    font-size: 14px !important;
    line-height: 1.5 !important;
  }
  
  /* Buttons - Touch Friendly */
  /* EXCEPT: Small action buttons (edit/delete) should be smaller - defined below */
  button:not(.edit-log-btn):not(.delete-log-btn):not([class*="edit-log"]):not([class*="delete-log"]),
  .btn:not(.edit-log-btn):not(.delete-log-btn):not([class*="edit-log"]):not([class*="delete-log"]),
  a.btn:not(.edit-log-btn):not(.delete-log-btn):not([class*="edit-log"]):not([class*="delete-log"]),
  input[type="button"]:not(.edit-log-btn):not(.delete-log-btn),
  input[type="submit"]:not(.edit-log-btn):not(.delete-log-btn) {
    min-height: 44px !important;
    padding: 12px 16px !important;
    font-size: 16px !important;
    touch-action: manipulation;
  }
  
  /* Exception: Small action buttons (edit/delete in campaign log) should be smaller */
  /* Use very specific selectors to override general button styles - MUST come after general button rule */
  .edit-log-btn,
  .delete-log-btn,
  button.edit-log-btn,
  button.delete-log-btn,
  .log-entry .edit-log-btn,
  .log-entry .delete-log-btn,
  .log-entry button.edit-log-btn,
  .log-entry button.delete-log-btn,
  .log-actions .edit-log-btn,
  .log-actions .delete-log-btn,
  .log-actions button.edit-log-btn,
  .log-actions button.delete-log-btn,
  button[class*="edit-log"],
  button[class*="delete-log"],
  [class*="edit-log-btn"],
  [class*="delete-log-btn"] {
    min-height: 24px !important;
    max-height: 24px !important;
    height: 24px !important;
    padding: 3px 6px !important;
    font-size: 10px !important;
    line-height: 1 !important;
    width: auto !important;
    min-width: 45px !important;
    max-width: 55px !important;
    box-sizing: border-box !important;
    flex-shrink: 0 !important;
    touch-action: manipulation !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
  
  /* Override: Keep log-actions buttons inline (row) instead of stacked (column) */
  .log-header-right .log-actions {
    flex-direction: row !important;
    width: auto !important;
    gap: 6px !important;
  }
  
  .log-header-right .log-actions button {
    width: auto !important;
  }
  
  /* Override any inline styles that might set min-height */
  button[class*="edit-log"][style*="min-height"],
  button[class*="delete-log"][style*="min-height"],
  .edit-log-btn[style*="min-height"],
  .delete-log-btn[style*="min-height"] {
    min-height: 24px !important;
    height: 24px !important;
  }
  
  /* Links */
  a {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    padding: 4px 0;
  }
  
  /* Forms - Full Width */
  form {
    width: 100% !important;
    max-width: 100% !important;
  }
  
  .form-group {
    margin-bottom: 16px !important;
  }
  
  /* Lists */
  ul, ol {
    padding-left: 20px !important;
  }
  
  /* Code Blocks */
  pre, code {
    font-size: 12px !important;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  
  /* Ensure no horizontal scroll */
  html, body {
    overflow-x: hidden !important;
    width: 100% !important;
    max-width: 100vw !important;
    position: relative !important;
  }
  
  * {
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
  
  /* Images */
  img {
    max-width: 100% !important;
    height: auto !important;
  }
  
  /* Safe Area Insets for Notched Devices */
  @supports (padding: env(safe-area-inset-top)) {
    .mobile-header {
      padding-left: max(12px, env(safe-area-inset-left)) !important;
      padding-right: max(12px, env(safe-area-inset-right)) !important;
      padding-top: max(10px, env(safe-area-inset-top)) !important;
      height: auto !important;
      min-height: 56px !important;
    }
    
    .main-content {
      padding-bottom: max(60px, env(safe-area-inset-bottom)) !important;
      padding-left: max(0px, env(safe-area-inset-left)) !important;
      padding-right: max(0px, env(safe-area-inset-right)) !important;
    }
    
    .sidebar {
      padding-top: max(20px, env(safe-area-inset-top)) !important;
      padding-bottom: max(20px, env(safe-area-inset-bottom)) !important;
      padding-left: max(0px, env(safe-area-inset-left)) !important;
    }
    
    #mobileFiltersPanel {
      padding-top: max(12px, calc(56px + env(safe-area-inset-top))) !important;
      padding-bottom: max(80px, env(safe-area-inset-bottom)) !important;
      padding-left: max(10px, env(safe-area-inset-left)) !important;
      padding-right: max(10px, env(safe-area-inset-right)) !important;
    }
  }
  
  /* Prevent content from being clipped */
  .wrap,
  .container,
  .campaigns-container {
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
    box-sizing: border-box !important;
    overflow-x: hidden !important;
  }
  
  /* Deck Dashboard Specific Fixes */
  .deck-panel,
  .glass-panel {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box !important;
    overflow-x: hidden !important;
  }
  
  .deck-panel .body {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    overflow-x: hidden !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
  }
  
  /* Deck Header - Stack on Mobile */
  .deck-header,
  .deck-header > * {
    flex-direction: column !important;
    align-items: flex-start !important;
    width: 100% !important;
    max-width: 100% !important;
  }
  
  .deck-header .deck-info {
    width: 100% !important;
    max-width: 100% !important;
    margin-top: 12px !important;
  }
  
  .deck-header .deck-actions {
    width: 100% !important;
    margin-left: 0 !important;
    margin-top: 12px !important;
    flex-direction: column !important;
    gap: 8px !important;
  }
  
  .deck-header .deck-actions button {
    width: 100% !important;
    max-width: 100% !important;
  }
  
  .deck-meta {
    flex-wrap: wrap !important;
    gap: 8px !important;
    width: 100% !important;
  }
  
  /* Deck Search and Filters - Stack on Mobile */
  .deck-panel .body > div:has(input#deckSearch),
  .deck-panel .body > div:has(select#deckSortBy),
  .deck-panel .body > div[style*="display:flex"]:has(input#deckSearch),
  .deck-panel .body > div[style*="display:flex"]:has(select#deckSortBy) {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 12px !important;
    width: 100% !important;
    flex-wrap: wrap !important;
  }
  
  .deck-panel input#deckSearch,
  .deck-panel select#deckSortBy,
  .deck-panel select#deckSortOrder {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    box-sizing: border-box !important;
  }
  
  .deck-panel .deck-filter-btn {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    white-space: nowrap !important;
  }
  
  /* Fix deck header flex layout on mobile */
  .deck-panel .body > div[style*="display:flex"] {
    flex-wrap: wrap !important;
    width: 100% !important;
    max-width: 100% !important;
  }
  
  .deck-panel .body > div[style*="display:flex"] > div.deck-info {
    flex: 1 1 100% !important;
    min-width: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
  }
  
  .deck-panel .body > div[style*="display:flex"] > div.deck-actions {
    flex: 1 1 100% !important;
    min-width: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-top: 12px !important;
    flex-direction: column !important;
  }
  
  .deck-panel .body > div[style*="display:flex"] > div.deck-actions button {
    width: 100% !important;
    max-width: 100% !important;
  }
  
  /* Fix search controls container */
  .deck-panel .body > div[style*="justify-content:space-between"] {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 12px !important;
    width: 100% !important;
  }
  
  .deck-panel .body > div[style*="justify-content:space-between"] > div {
    width: 100% !important;
    max-width: 100% !important;
  }
  
  .deck-panel .body > div[style*="justify-content:space-between"] > div[style*="display:flex"] {
    flex-wrap: wrap !important;
    width: 100% !important;
    gap: 8px !important;
  }
  
  /* Dashboard Grid - Single Column on Mobile - Already defined above, but ensure it's enforced */
  .dashboard-grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
    overflow-y: visible !important;
  }
  
  .dashboard-grid > * {
    width: 100% !important;
    max-width: 100% !important;
    grid-column: auto !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
  }
  
  /* Stats Grid - Responsive */
  .stats-grid {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
    width: 100% !important;
    max-width: 100% !important;
  }
  
  @media (max-width: 374px) {
    .stats-grid {
      grid-template-columns: 1fr !important;
    }
  }
  
  /* Card Lists - Prevent Overflow */
  .card-list,
  #deckComposition,
  #damageLog {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    box-sizing: border-box !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
  }
  
  /* Modals - Full Screen on Mobile */
  .modal,
  #upgradeModal,
  #addCardModal {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100vw !important;
    max-width: 100vw !important;
    height: 100vh !important;
    max-height: 100vh !important;
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 0 !important;
    overflow: hidden !important;
    z-index: 10000 !important;
    background: rgba(0,0,0,0.85) !important;
  }
  
  #addCardModal[style] {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100vw !important;
    max-width: 100vw !important;
    height: 100vh !important;
    max-height: 100vh !important;
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 0 !important;
    overflow: hidden !important;
    z-index: 10000 !important;
    background: rgba(0,0,0,0.85) !important;
  }
  
  /* Ensure modal is hidden by default */
  #addCardModal[style*="display:none"] {
    display: none !important;
  }
  
  .modal > div,
  #upgradeModal > div,
  #addCardModal > div {
    width: 100% !important;
    max-width: 100% !important;
    height: 100% !important;
    max-height: 100% !important;
    margin: 0 !important;
    border-radius: 0 !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
    transform: none !important;
    top: 0 !important;
    left: 0 !important;
    position: relative !important;
    display: flex !important;
    flex-direction: column !important;
  }
  
  #addCardModal > div[style] {
    position: relative !important;
    top: 0 !important;
    left: 0 !important;
    transform: none !important;
    width: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    border-radius: 0 !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
  }
  
  /* Add Card Modal - Mobile Optimized Internal Elements */
  #addCardModal > div > div:first-child {
    padding: 8px 10px !important;
    border-bottom-width: 1px !important;
  }
  
  #addCardModal h3 {
    font-size: 14px !important;
    margin: 0 !important;
    line-height: 1.3 !important;
  }
  
  #addCardModal #closeAddCardModal {
    font-size: 20px !important;
    padding: 2px 6px !important;
    line-height: 1 !important;
  }
  
  #addCardModal > div > div:last-child {
    padding: 10px !important;
  }
  
  /* Warning Banner */
  #addCardModal [style*="background:rgba(255,152,0"] {
    padding: 8px !important;
    margin-bottom: 10px !important;
    border-radius: 6px !important;
    gap: 6px !important;
  }
  
  #addCardModal [style*="background:rgba(255,152,0"] span {
    font-size: 16px !important;
  }
  
  #addCardModal [style*="background:rgba(255,152,0"] > div > div:first-child {
    font-size: 11px !important;
    margin-bottom: 2px !important;
    line-height: 1.3 !important;
  }
  
  #addCardModal [style*="background:rgba(255,152,0"] > div > div:last-child {
    font-size: 11px !important;
    line-height: 1.4 !important;
  }
  
  /* Search and Filters Container */
  #addCardModal [style*="margin-bottom:20px"] {
    margin-bottom: 10px !important;
  }
  
  /* Search Input */
  #addCardModal #cardSearchInput {
    padding: 8px 10px !important;
    font-size: 13px !important;
    border-radius: 6px !important;
    margin-bottom: 8px !important;
  }
  
  /* Filter Selects Container */
  #addCardModal [style*="display:flex"][style*="gap:12px"] {
    gap: 6px !important;
    margin-bottom: 10px !important;
  }
  
  /* Filter Selects */
  #addCardModal select {
    padding: 6px 8px !important;
    font-size: 11px !important;
    border-radius: 4px !important;
  }
  
  /* Cards List */
  #addCardModal #availableCardsList {
    max-height: calc(100vh - 240px) !important;
    border-radius: 6px !important;
    border-width: 1px !important;
    flex: 1 !important;
    min-height: 0 !important;
  }
  
  #addCardModal #availableCardsList > div {
    padding: 15px 10px !important;
    font-size: 12px !important;
  }
  
  /* Card Items in List (dynamically generated) */
  #addCardModal #availableCardsList .deck-card-item {
    padding: 6px 4px !important;
    gap: 6px !important;
    border-radius: 4px !important;
    margin-bottom: 3px !important;
  }
  
  #addCardModal #availableCardsList .deck-card-item > div:first-of-type {
    font-size: 11px !important;
    margin-bottom: 2px !important;
  }
  
  #addCardModal #availableCardsList .deck-card-item > div:first-of-type > div:last-child {
    font-size: 9px !important;
    gap: 3px !important;
  }
  
  #addCardModal #availableCardsList .deck-card-item img {
    width: 28px !important;
    height: 28px !important;
    border-radius: 2px !important;
  }
  
  #addCardModal #availableCardsList .deck-card-item button {
    font-size: 10px !important;
  }
  
  /* Quantity control buttons (+/-) */
  #addCardModal #availableCardsList .deck-card-item [style*="width:16px"],
  #addCardModal #availableCardsList .deck-card-item [data-action="increase"],
  #addCardModal #availableCardsList .deck-card-item [data-action="decrease"] {
    width: 14px !important;
    height: 14px !important;
    font-size: 10px !important;
    padding: 0 !important;
    min-width: 14px !important;
  }
  
  /* Copy state buttons */
  #addCardModal #availableCardsList .deck-card-item [data-action="toggle-copy"] {
    width: 10px !important;
    height: 10px !important;
    min-width: 10px !important;
    min-height: 10px !important;
  }
  
  /* Quantity display */
  #addCardModal #availableCardsList .deck-card-item [style*="min-width:16px"] {
    min-width: 14px !important;
    font-size: 10px !important;
  }
  
  #addCardModal #availableCardsList .deck-card-item [style*="font-size:13px"] {
    font-size: 11px !important;
  }
  
  #addCardModal #availableCardsList .deck-card-item [style*="font-size:14px"] {
    font-size: 12px !important;
  }
  
  #addCardModal #availableCardsList .deck-card-item [style*="font-size:11px"] {
    font-size: 10px !important;
  }
  
  #addCardModal #availableCardsList .deck-card-item [style*="font-size:10px"] {
    font-size: 9px !important;
  }
  
  #addCardModal #availableCardsList .deck-card-item [style*="gap:12px"] {
    gap: 6px !important;
  }
  
  #addCardModal #availableCardsList .deck-card-item [style*="gap:8px"] {
    gap: 4px !important;
  }
  
  #addCardModal #availableCardsList .deck-card-item [style*="gap:6px"] {
    gap: 4px !important;
  }
  
  #addCardModal #availableCardsList .deck-card-item [style*="gap:4px"] {
    gap: 3px !important;
  }
  
  #addCardModal #availableCardsList .deck-card-item [style*="padding:12px"] {
    padding: 8px 6px !important;
  }
  
  #addCardModal #availableCardsList .deck-card-item [style*="padding:4px"] {
    padding: 3px !important;
  }
  
  #addCardModal #availableCardsList .deck-card-item [style*="padding:4px 8px"] {
    padding: 3px 6px !important;
  }
  
  #addCardModal #availableCardsList .deck-card-item [style*="border-radius:10px"] {
    border-radius: 6px !important;
  }
  
  #addCardModal #availableCardsList .deck-card-item [style*="border-radius:8px"] {
    border-radius: 5px !important;
  }
  
  #addCardModal #availableCardsList .deck-card-item [style*="border-radius:6px"] {
    border-radius: 4px !important;
  }
  
  #addCardModal #availableCardsList .deck-card-item [style*="margin-bottom:6px"] {
    margin-bottom: 4px !important;
  }
  
  /* Empty state message */
  #addCardModal #availableCardsList > div[style*="text-align:center"] {
    padding: 15px 10px !important;
    font-size: 12px !important;
  }
  
  /* Ensure buttons are touch-friendly but compact */
  #addCardModal #availableCardsList .deck-card-item button {
    min-height: 24px !important;
    min-width: 24px !important;
  }
  
  /* Scale down quantity display */
  #addCardModal #availableCardsList .deck-card-item [style*="min-width:20px"] {
    min-width: 18px !important;
    font-size: 11px !important;
  }
  
  /* Ensure modal header doesn't take too much space */
  #addCardModal > div > div:first-child {
    flex-shrink: 0 !important;
    min-height: auto !important;
  }
  
  /* Ensure content area is scrollable */
  #addCardModal > div > div:last-child {
    flex: 1 !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }
  
  /* Ensure all interactive elements are clickable and don't close modal */
  #addCardModal button,
  #addCardModal input,
  #addCardModal select,
  #addCardModal a {
    pointer-events: auto !important;
    touch-action: manipulation !important;
  }
  
  /* Prevent modal content from closing when clicked */
  #addCardModal > div {
    pointer-events: auto !important;
  }
  
  /* Ensure backdrop closes modal but content doesn't */
  #addCardModal {
    pointer-events: auto !important;
  }
  
  /* Tables - Horizontal Scroll if Needed */
  table {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: auto !important;
    overflow-y: visible !important;
    -webkit-overflow-scrolling: touch !important;
  }
  
  table thead,
  table tbody,
  table tr {
    display: block !important;
    width: 100% !important;
  }
  
  table td,
  table th {
    white-space: nowrap !important;
    min-width: 100px !important;
  }
  
  /* Forms - Full Width */
  form,
  .form-group,
  .form-input,
  .form-select {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
  
  /* Buttons - Full Width on Mobile When in Stack */
  .campaign-actions,
  .card-actions,
  .form-actions {
    flex-direction: column !important;
    width: 100% !important;
    gap: 8px !important;
  }
  
  /* Exception: log-actions in header should stay inline */
  .log-header-right .log-actions {
    flex-direction: row !important;
    width: auto !important;
    gap: 6px !important;
  }
  
  .campaign-actions button,
  .campaign-actions a,
  .card-actions button,
  .form-actions button {
    width: 100% !important;
  }
  
  /* Exception: log-actions buttons in header should not be full width */
  .log-header-right .log-actions button {
    width: auto !important;
    max-width: 100% !important;
  }
  
  /* Text Content - Prevent Overflow */
  p, li, span, div, h1, h2, h3, h4, h5, h6 {
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    hyphens: auto !important;
    max-width: 100% !important;
  }
  
  /* Prevent Fixed Elements from Overlapping */
  .mobile-header {
    position: sticky !important;
    top: 0 !important;
    z-index: 11000 !important; /* Below sidebar */
  }
  
  .sidebar {
    z-index: 12000 !important; /* Highest - above everything */
  }
  
  .sidebar-backdrop,
  .filters-backdrop {
    z-index: 11000 !important; /* Below sidebar */
  }
  
  #mobileFiltersPanel {
    z-index: 13000 !important; /* Above sidebar when filters are open */
  }
  
  /* Ensure content doesn't get stuck under fixed headers */
  .main-content {
    padding-top: 0 !important;
    margin-top: 0 !important;
  }
  
  /* Fix for elements with inline styles that might cause overflow */
  [style*="width"],
  [style*="max-width"],
  [style*="min-width"] {
    max-width: 100% !important;
  }
  
  /* Ensure flex containers wrap properly */
  [style*="display:flex"] {
    flex-wrap: wrap !important;
  }
  
  /* Fix for specific deck dashboard elements */
  .face-crop.arkham-investigator {
    width: 60px !important;
    height: 60px !important;
    min-width: 60px !important;
    flex-shrink: 0 !important;
  }
  
  /* Upgrade Sheets List */
  #upgradeSheetsList {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
  }
  
  /* Additional fixes for inline style overrides */
  section.deck-panel[style*="grid-column"] {
    grid-column: auto !important;
    width: 100% !important;
    max-width: 100% !important;
  }
  
  /* Fix for any remaining width issues */
  .deck-panel header,
  .glass-panel header {
    width: 100% !important;
    max-width: 100% !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
  }
  
  /* Ensure all buttons in deck actions are full width on mobile */
  .deck-actions,
  .deck-actions[style*="display:flex"] {
    flex-direction: column !important;
    width: 100% !important;
    gap: 8px !important;
  }
  
  .deck-actions button,
  .deck-actions .btn {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
  
  /* Fix for modals with inline styles */
  #upgradeModal[style],
  #addCardModal[style] {
    width: 100vw !important;
    max-width: 100vw !important;
    height: 100vh !important;
    max-height: 100vh !important;
    left: 0 !important;
    right: 0 !important;
    top: 0 !important;
    bottom: 0 !important;
  }
  
  /* Prevent any element from causing horizontal scroll */
  body > * {
    max-width: 100vw !important;
    overflow-x: hidden !important;
  }
  
  /* Fix for elements that might be positioned off-screen */
  [style*="position:absolute"],
  [style*="position:fixed"] {
    max-width: 100vw !important;
  }
  
  /* Ensure all text inputs respect viewport */
  input[type="text"],
  input[type="search"],
  textarea,
  select {
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
  
  /* Disable ALL card hover effects on mobile/touch devices */
  .card:hover,
  .card:active,
  .investigator-card:hover,
  .investigator-card:active,
  .campaign-card:hover,
  .campaign-card:active,
  .expansion-card:hover,
  .expansion-card:active,
  .deck-card:hover,
  .deck-card:active,
  .card-display:hover,
  .card-display:active,
  .glass-card:hover,
  .glass-card:active,
  .ah-card:hover,
  .ah-card:active,
  .card.exceptional:hover,
  .card.exceptional:active,
  .deck-card-item:hover,
  .deck-card-item:active,
  .upgrade-card:hover,
  .upgrade-card:active,
  .card-item:hover,
  .card-item:active {
    transform: none !important;
    scale: 1 !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
    filter: none !important;
    border-color: rgba(255, 255, 255, 0.15) !important;
    background: rgba(44, 44, 46, 0.6) !important;
    z-index: auto !important;
  }
  
  /* Disable hover pseudo-elements */
  .card:hover::before,
  .card:hover::after,
  .investigator-card:hover::before,
  .investigator-card:hover::after {
    display: none !important;
    opacity: 0 !important;
  }
  
  /* Disable hover effects on card images */
  .card:hover .card-image,
  .investigator-card:hover .investigator-portrait,
  .card-display:hover .card-image {
    transform: none !important;
    filter: none !important;
  }
}

/* Universal rule to disable card hover on ALL touch devices (works for all screen sizes) */
@media (pointer: coarse), (hover: none) {
  .card:hover,
  .card:active,
  .investigator-card:hover,
  .investigator-card:active,
  .campaign-card:hover,
  .campaign-card:active,
  .expansion-card:hover,
  .expansion-card:active,
  .deck-card:hover,
  .deck-card:active,
  .card-display:hover,
  .card-display:active,
  .glass-card:hover,
  .glass-card:active,
  .ah-card:hover,
  .ah-card:active,
  .card.exceptional:hover,
  .card.exceptional:active,
  .deck-card-item:hover,
  .deck-card-item:active,
  .upgrade-card:hover,
  .upgrade-card:active,
  .card-item:hover,
  .card-item:active {
    transform: none !important;
    scale: 1 !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
    filter: none !important;
    border-color: rgba(255, 255, 255, 0.15) !important;
    background: rgba(44, 44, 46, 0.6) !important;
    z-index: auto !important;
  }
  
  .card:hover::before,
  .card:hover::after,
  .investigator-card:hover::before,
  .investigator-card:hover::after {
    display: none !important;
    opacity: 0 !important;
  }
  
  .card:hover .card-image,
  .investigator-card:hover .investigator-portrait,
  .card-display:hover .card-image {
    transform: none !important;
    filter: none !important;
  }
  
  /* Upgrade Modal - Enhanced for small phones */
  #upgradeModal {
    padding: 0 !important;
    overflow: hidden !important;
  }
  
  #upgradeModal > div {
    padding: 8px !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch !important;
  }
  
  #upgradeModal h3 {
    font-size: 18px !important;
    padding: 8px 12px !important;
  }
  
  /* Upgrade Modal XP Info Bar - Stack on small screens */
  #upgradeModal div[style*="display:flex"]:has(div[id*="modalAvailableXP"]) {
    flex-direction: column !important;
    gap: 8px !important;
  }
  
  #upgradeModal div[style*="display:flex"]:has(div[id*="modalAvailableXP"]) > div {
    width: 100% !important;
    display: flex !important;
    justify-content: space-around !important;
    flex-wrap: wrap !important;
    gap: 12px !important;
  }
  
  #upgradeModal div[style*="display:flex"]:has(div[id*="modalAvailableXP"]) > div > div {
    flex: 1 1 auto !important;
    min-width: 60px !important;
  }
  
  /* Upgrade Modal Search - Stack on mobile */
  #upgradeModal div[style*="display:flex"]:has(input#upgradeCardSearchInput),
  #upgradeModal div[style*="display:flex"]:has(input#currentDeckSearch) {
    flex-direction: column !important;
    gap: 8px !important;
  }
  
  #upgradeModal input#upgradeCardSearchInput,
  #upgradeModal input#currentDeckSearch {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
  
  #upgradeModal button#clearSearch,
  #upgradeModal button#upgradeShowAllCards,
  #upgradeModal button#upgradeShowExiledCards {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
  
  /* Upgrade Modal Action Buttons - Stack on mobile */
  #upgradeModal div[style*="display:flex"]:has(button#applyUpgrade) {
    flex-direction: column !important;
    gap: 8px !important;
  }
  
  #upgradeModal button#cancelUpgrade,
  #upgradeModal button#applyUpgrade {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
  
  #upgradeModal button#cancelUpgrade {
    max-width: 100% !important;
  }
  
  /* Upgrade Modal Lists - Proper scrolling */
  #availableUpgradesList,
  #currentDeckCardsList,
  #searchResults {
    max-height: 30vh !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }
  
  /* Card Status Indicators - Stack on small screens */
  #upgradeModal div[style*="display:flex"]:has(span[style*="width:14px"]) {
    flex-direction: column !important;
    gap: 8px !important;
  }
  
  #upgradeModal div[style*="display:flex"]:has(span[style*="width:16px"]) {
    flex-direction: column !important;
    gap: 8px !important;
  }
  
  /* Ensure upgrade modal is always visible and functional */
  #upgradeModal[style*="display:none"] {
    display: none !important;
  }
  
  #upgradeModal[style*="display:block"],
  #upgradeModal[style*="display: flex"] {
    display: block !important;
  }
  
  /* Fix upgrade modal container scrolling */
  #upgradeModal > div[style*="display:flex"] {
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
    max-height: 100vh !important;
    overflow: hidden !important;
  }
  
  /* Fix upgrade modal content area */
  #upgradeModal > div > div[style*="flex:1"] {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch !important;
  }
  
  /* Ensure all interactive elements are touch-friendly */
  #upgradeModal button,
  #upgradeModal input,
  #upgradeModal select,
  #upgradeModal .qtybtn,
  #upgradeModal .add-card-btn {
    min-height: 44px !important;
    touch-action: manipulation !important;
    -webkit-tap-highlight-color: rgba(106, 183, 255, 0.3) !important;
  }
  
  /* Fix card items in upgrade modal */
  #upgradeModal .card-item,
  #upgradeModal .deck-card-item {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    padding: 8px !important;
    margin-bottom: 8px !important;
  }
  
  /* Ensure card action buttons are accessible */
  #upgradeModal .card-actions,
  #upgradeModal .card-actions button {
    min-height: 44px !important;
    touch-action: manipulation !important;
  }
  
  /* Fix XP info bar layout on mobile */
  #upgradeModal div[style*="gap:32px"] {
    gap: 8px !important;
    flex-wrap: wrap !important;
    justify-content: space-around !important;
  }
  
  #upgradeModal div[style*="gap:32px"] > div {
    flex: 1 1 auto !important;
    min-width: 70px !important;
    text-align: center !important;
  }
  
  /* Fix filter buttons container */
  #upgradeModal div[style*="gap:12px"]:has(button.deck-filter-btn) {
    flex-wrap: wrap !important;
    gap: 8px !important;
  }
  
  #upgradeModal button.deck-filter-btn {
    flex: 1 1 auto !important;
    min-width: calc(50% - 4px) !important;
    max-width: calc(50% - 4px) !important;
  }
}

/* iPhone 6 and smaller phones (375px and below) - Extra optimizations */
@media (max-width: 375px) {
  /* Smaller padding for very small screens */
  .main-content {
    padding-left: 8px !important;
    padding-right: 8px !important;
  }
  
  .wrap,
  .container {
    padding-left: 8px !important;
    padding-right: 8px !important;
  }
  
  .deck-panel,
  .glass-panel {
    padding: 12px !important;
  }
  
  .deck-panel .body {
    padding: 12px !important;
  }
  
  /* Smaller text on very small screens */
  h1 {
    font-size: 20px !important;
  }
  
  h2 {
    font-size: 18px !important;
  }
  
  h3 {
    font-size: 16px !important;
  }
  
  /* Smaller buttons but still touch-friendly */
  button,
  .btn {
    padding: 10px 14px !important;
    font-size: 14px !important;
    min-height: 44px !important;
  }
  
  /* Stats grid - single column on very small screens */
  .stats-grid {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }
  
  /* Upgrade Modal - Even more compact */
  #upgradeModal h3 {
    font-size: 16px !important;
    padding: 6px 10px !important;
  }
  
  #upgradeModal > div {
    padding: 6px !important;
  }
  
  #upgradeModal div[style*="padding:16px"] {
    padding: 12px !important;
  }
  
  #upgradeModal div[style*="padding:12px"] {
    padding: 8px !important;
  }
  
  /* Smaller XP display numbers */
  #upgradeModal div[id*="modalAvailableXP"],
  #upgradeModal div[id*="modalUpgradeCost"],
  #upgradeModal div[id*="modalRemainingXP"] {
    font-size: 20px !important;
  }
  
  /* Card lists - smaller max height on very small screens */
  #availableUpgradesList,
  #currentDeckCardsList,
  #searchResults {
    max-height: 25vh !important;
  }
  
  /* Mobile header - more compact */
  /* Very small screens - maintain professional appearance */
  .mobile-header {
    padding: 10px 12px !important;
    min-height: 52px !important;
    gap: 10px !important;
  }
  
  .mobile-header .menu-btn {
    padding: 8px 12px !important;
    min-width: 40px !important;
    min-height: 40px !important;
    font-size: 20px !important;
  }
  
  .mobile-header .filters-btn {
    padding: 8px 12px !important;
    min-width: 60px !important;
    min-height: 40px !important;
    font-size: 13px !important;
  }
  
  .mobile-header .brand img {
    height: 24px !important;
  }
  
  .mobile-header .brand span {
    font-size: 15px !important;
  }
}

/* Medium screens (tablets in portrait) - Only apply when NOT a phone */
@media (min-width: 933px) and (max-width: 1024px) {
  .grid,
  .campaigns-grid,
  .investigator-grid,
  .expansion-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 20px !important;
  }
  
  .main-content {
    padding: 20px !important;
  }
}

/* Large screens - keep desktop design */
@media (min-width: 1025px) {
  /* Desktop design remains unchanged */
  .mobile-header {
    display: none !important;
  }
}