/* =============================================================================
   TOKENLORDS MOBILE GLOBAL STYLESHEET
   =============================================================================
   Comprehensive mobile-first optimizations for all pages.
   Breakpoints: 1024px (tablet), 768px (large phone), 600px (phone), 480px (small phone)
   
   2025 Mobile UX Best Practices:
   - 44px minimum touch targets
   - 14px minimum readable font
   - No horizontal scroll
   - Full-screen modals on mobile
   - Bottom-friendly navigation
   - Proper safe area insets for notched devices
   
   MOBILE LAYOUT:
   - TOP: Hamburger menu bar (60px) with logo
   - BOTTOM: Minimal status bar (level + bronze + TLRPG + euro)
   - MENU: Full-screen slide-in with ALL nav items + resources + settings
   ============================================================================= */

/* =============================================================================
   ROOT MOBILE TOKENS
   ============================================================================= */
:root {
  /* Touch-friendly sizes */
  --touch-target-min: 44px;
  --touch-target-comfortable: 48px;
  
  /* Mobile typography */
  --font-size-mobile-base: 14px;
  --font-size-mobile-sm: 13px;
  --font-size-mobile-xs: 12px;
  
  /* Safe areas for notched devices */
  --safe-area-top: env(safe-area-inset-top, 0px);
  --safe-area-bottom: env(safe-area-inset-bottom, 0px);
  --safe-area-left: env(safe-area-inset-left, 0px);
  --safe-area-right: env(safe-area-inset-right, 0px);
  
  /* Mobile layout heights - compact like battle page */
  --mobile-header-height: 50px;
  --mobile-bottom-bar-height: 52px;
  --mobile-progress-bars-height: 44px;
  /* Total bottom area: status bar + progress bars + safe area */
  --mobile-bottom-total: calc(var(--mobile-bottom-bar-height) + var(--mobile-progress-bars-height) + var(--safe-area-bottom));
  /* Content area height: full viewport minus header and bottom bars */
  --mobile-content-height: calc(100vh - var(--mobile-header-height) - var(--mobile-bottom-total));
}

/* =============================================================================
   GLOBAL MOBILE FIXES - Mobile First Principles
   - No fixed widths/heights except icons
   - Avoid position absolute for layout
   - All flex children have min-width: 0 for text overflow
   - Responsive spacing: column on mobile, row from md
   - No horizontal scrolling
   ============================================================================= */

/* Prevent horizontal overflow on all pages */
@media (max-width: 768px) {
  html, body {
    overflow-x: hidden !important;
    width: 100% !important;
    max-width: 100vw !important;
  }
  
  /* Global flex child fix - prevent text overflow breaking layouts */
  * {
    min-width: 0;
  }
  
  /* Ensure all containers respect viewport */
  .content,
  main,
  section,
  article,
  div[class*="page"],
  div[class*="container"] {
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
  
  /* CRITICAL: All main content containers MUST have bottom padding for the fixed bars */
  .content,
  main.content,
  .main-content,
  .page-container,
  .dashboard-page,
  .battle-page,
  .crafting-page,
  .inventory-page,
  .chests-page,
  .businesses-page,
  .armory-page,
  .market-page,
  .settings-page,
  .referrals-page,
  .leaderboard-page,
  .admin-page,
  .get-tlrpg-page,
  .get-vip-page,
  [class*="-page"] {
    overflow-x: hidden !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    /* Proper padding to avoid header/footer overlap - compact like battle page */
    padding-top: var(--mobile-header-height) !important;
    padding-bottom: calc(var(--mobile-bottom-total) + 1rem) !important;
    min-height: auto !important;
  }
  
  /* For pages that use full viewport height, constrain to content area */
  body.has-sidebar .content,
  body.has-sidebar main.content,
  body.has-sidebar.has-top-status-bar .content,
  body.has-sidebar.has-top-status-bar main.content {
    min-height: auto !important;
    max-height: none !important;
    padding-top: var(--mobile-header-height) !important;
    padding-bottom: calc(var(--mobile-bottom-total) + 1rem) !important;
  }
  
  /* Ensure scrollable content doesn't go under fixed bars */
  #root,
  #app,
  .app-container {
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
  }
}

/* =============================================================================
   MOBILE NAVIGATION - HAMBURGER MENU SYSTEM
   ============================================================================= */
@media (max-width: 768px) {
  /* -------------------------------------------------------------------------
     SIDEBAR: Convert to minimal top bar with hamburger
     ------------------------------------------------------------------------- */
  body.has-sidebar .sidebar,
  body.has-sidebar.has-top-status-bar .sidebar {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    height: var(--mobile-header-height) !important;
    width: 100% !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    padding: 0 0.75rem !important;
    padding-top: var(--safe-area-top) !important;
    justify-content: space-between !important;
    align-items: center !important;
    z-index: 1000 !important;
    background: rgba(8, 10, 16, 0.98) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-right: none !important;
    overflow: visible !important;
    bottom: auto !important;
  }
  
  /* Logo in center */
  body.has-sidebar .logo,
  body.has-sidebar.has-top-status-bar .logo {
    display: flex !important;
    margin: 0 !important;
    gap: 0.5rem !important;
    order: 2 !important;
    position: absolute !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
  }
  
  body.has-sidebar .logo-mark {
    width: 36px !important;
    height: 36px !important;
  }
  
  body.has-sidebar .logo-text {
    font-size: 0.65rem !important;
    display: block !important;
  }
  
  /* -------------------------------------------------------------------------
     HAMBURGER BUTTON
     ------------------------------------------------------------------------- */
  .mobile-menu-toggle {
    display: flex !important;
    width: 44px;
    height: 44px;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    cursor: pointer;
    z-index: 1001;
    padding: 0;
    order: 1 !important;
  }
  
  .mobile-menu-toggle .hamburger-icon {
    display: flex;
    flex-direction: column;
    gap: 5px;
    width: 24px;
  }
  
  .mobile-menu-toggle .hamburger-icon span {
    display: block;
    height: 2px;
    width: 100%;
    background: rgba(255, 255, 255, 0.8);
    border-radius: 1px;
    transition: all 0.3s ease;
  }
  
  /* Hamburger to X animation */
  body.mobile-menu-open .mobile-menu-toggle .hamburger-icon span:nth-child(1) {
    transform: rotate(45deg) translate(5px, 5px);
  }
  
  body.mobile-menu-open .mobile-menu-toggle .hamburger-icon span:nth-child(2) {
    opacity: 0;
  }
  
  body.mobile-menu-open .mobile-menu-toggle .hamburger-icon span:nth-child(3) {
    transform: rotate(-45deg) translate(5px, -5px);
  }
  
  /* Placeholder for right side to balance the layout */
  body.has-sidebar .sidebar::after {
    content: '';
    width: 44px;
    height: 44px;
    order: 3;
  }
  
  /* Hide sidebar toggle and online count on mobile top bar */
  body.has-sidebar .sidebar-toggle,
  body.has-sidebar .sidebar-status {
    display: none !important;
  }
  
  /* -------------------------------------------------------------------------
     FULL-SCREEN NAVIGATION MENU - Fresh Clean Design
     ------------------------------------------------------------------------- */
  body.has-sidebar .nav-menu {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    background: #0a0a0f !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    align-items: stretch !important;
    padding: calc(var(--mobile-header-height) + var(--safe-area-top) + 20px) 16px calc(var(--safe-area-bottom) + 6rem) 16px !important;
    gap: 0 !important;
    z-index: 999 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch;
    transform: translateX(-100%) !important;
    transition: transform 0.3s ease !important;
    width: 100% !important;
    height: 100vh !important;
    max-height: 100vh !important;
    flex-wrap: nowrap !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }
  
  /* Show menu when mobile-menu-open class is added */
  body.has-sidebar.mobile-menu-open .nav-menu {
    transform: translateX(0) !important;
    visibility: visible !important;
    pointer-events: auto !important;
  }
  
  /* -------------------------------------------------------------------------
     NAV BUTTONS - Clean compact list style
     ------------------------------------------------------------------------- */
  body.has-sidebar .nav-btn {
    width: 100% !important;
    min-height: 52px !important;
    padding: 14px 16px !important;
    font-size: 1rem !important;
    border-radius: 0 !important;
    justify-content: flex-start !important;
    gap: 14px !important;
    border: none !important;
    background: transparent !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
    margin: 0 !important;
    flex-shrink: 0 !important;
    display: flex !important;
    align-items: center !important;
    opacity: 1 !important;
    visibility: visible !important;
    box-sizing: border-box !important;
    color: rgba(255, 255, 255, 0.9) !important;
    text-decoration: none !important;
    font-weight: 500 !important;
    transition: background 0.15s ease !important;
  }
  
  body.has-sidebar .nav-btn:active {
    background: rgba(255, 255, 255, 0.08) !important;
  }
  
  body.has-sidebar .nav-btn svg {
    width: 22px !important;
    height: 22px !important;
    opacity: 0.6 !important;
    flex-shrink: 0 !important;
  }
  
  body.has-sidebar .nav-label {
    font-size: 1rem !important;
    opacity: 1 !important;
    display: block !important;
    color: inherit !important;
  }
  
  body.has-sidebar .nav-btn.active {
    background: rgba(247, 160, 15, 0.1) !important;
    border-bottom: 1px solid rgba(247, 160, 15, 0.2) !important;
  }
  
  body.has-sidebar .nav-btn.active svg {
    color: #f7a00f !important;
    opacity: 1 !important;
  }
  
  body.has-sidebar .nav-btn.active .nav-label {
    color: #f7a00f !important;
  }
  
  /* Hide nav radio on mobile */
  body.has-sidebar .nav-radio {
    display: none !important;
  }
  
  /* -------------------------------------------------------------------------
     SPECIAL BUTTONS SECTION - Earn, Buy TLRPG, Get VIP
     Make the wrapper display:contents so buttons flow naturally in nav
     ------------------------------------------------------------------------- */
  body.has-sidebar .sidebar-special-buttons {
    display: contents !important;
  }
  
  /* Remove the pseudo-element title on mobile */
  body.has-sidebar .sidebar-special-buttons::before {
    display: none !important;
  }
  
  /* Special buttons - same style as other nav items */
  body.has-sidebar .nav-btn-special,
  body.has-sidebar .btn-referrals,
  body.has-sidebar .btn-get-tlrpg,
  body.has-sidebar .btn-get-vip {
    display: flex !important;
    width: 100% !important;
    min-height: 52px !important;
    padding: 14px 16px !important;
    font-size: 1rem !important;
    border-radius: 0 !important;
    justify-content: flex-start !important;
    gap: 14px !important;
    border: none !important;
    background: transparent !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
    margin: 0 !important;
    flex-shrink: 0 !important;
    align-items: center !important;
    opacity: 1 !important;
    visibility: visible !important;
    box-sizing: border-box !important;
    color: rgba(255, 255, 255, 0.9) !important;
    text-decoration: none !important;
    font-weight: 500 !important;
    order: 50 !important;  /* Between nav items (default 0) and logout (100) */
  }
  
  body.has-sidebar .btn-referrals svg {
    color: #10b981 !important;
    opacity: 0.8 !important;
  }
  
  body.has-sidebar .btn-get-tlrpg svg {
    color: #f7a00f !important;
    opacity: 0.8 !important;
  }
  
  body.has-sidebar .btn-get-vip svg {
    color: #eab308 !important;
    opacity: 0.8 !important;
  }
  
  body.has-sidebar .nav-btn-special svg {
    width: 22px !important;
    height: 22px !important;
    flex-shrink: 0 !important;
  }
  
  body.has-sidebar .nav-btn-special .nav-label {
    font-size: 1rem !important;
    display: block !important;
    opacity: 1 !important;
  }
  
  /* -------------------------------------------------------------------------
     LOGOUT BUTTON - Always visible at bottom
     ------------------------------------------------------------------------- */
  body.has-sidebar .logout-btn-minimal {
    display: flex !important;
    width: 100% !important;
    min-height: 48px !important;
    justify-content: center !important;
    align-items: center !important;
    margin-top: 16px !important;
    padding: 12px 16px !important;
    gap: 10px !important;
    background: rgba(239, 68, 68, 0.12) !important;
    border: 1px solid rgba(239, 68, 68, 0.25) !important;
    border-radius: 12px !important;
    color: #f87171 !important;
    font-size: 0.95rem !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    flex-shrink: 0 !important;
    order: 100 !important;  /* Push to end, after special buttons */
  }
  
  body.has-sidebar .logout-btn-minimal:active {
    background: rgba(239, 68, 68, 0.25) !important;
  }
  
  body.has-sidebar .logout-btn-minimal svg {
    width: 20px !important;
    height: 20px !important;
  }
  
  body.has-sidebar .logout-btn-minimal .logout-text {
    display: inline !important;
  }
  
  /* -------------------------------------------------------------------------
     ONLINE COUNT
     ------------------------------------------------------------------------- */
  body.has-sidebar .sidebar-online-count {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 12px !important;
    margin-top: 8px !important;
    opacity: 0.6 !important;
    font-size: 0.8rem !important;
    flex-shrink: 0 !important;
    order: 101 !important;  /* After logout button */
  }
  
  body.has-sidebar .sidebar-online-count .online-dot {
    width: 6px !important;
    height: 6px !important;
    background: #22c55e !important;
    border-radius: 50% !important;
  }
  
  /* -------------------------------------------------------------------------
     CONTENT AREA ADJUSTMENTS
     ------------------------------------------------------------------------- */
  body.has-sidebar .content,
  body.has-sidebar main.content {
    padding-top: var(--mobile-header-height) !important;
    /* Use standard bottom padding variable */
    padding-bottom: calc(var(--mobile-bottom-total) + 1rem) !important;
    margin-left: 0 !important;
    width: 100% !important;
  }
  
  /* When menu is open, prevent body scroll */
  body.mobile-menu-open {
    overflow: hidden !important;
  }
  
  /* Coming soon badge visible */
  body.has-sidebar .nav-coming-soon {
    display: inline-flex !important;
    font-size: 0.6rem !important;
  }
}

/* Hide hamburger on desktop */
@media (min-width: 769px) {
  .mobile-menu-toggle {
    display: none !important;
  }
}

/* =============================================================================
   FULL-SCREEN MODALS ON MOBILE
   ============================================================================= */
@media (max-width: 600px) {
  /* All modals become full-screen */
  .modal-overlay .modal,
  .modal-overlay > div:first-child,
  .preview-modal,
  .loot-modal,
  .skill-modal,
  .quest-modal,
  .item-modal,
  .forge-game-modal,
  .chest-preview-modal,
  [class*="-modal"]:not(.modal-overlay) {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    height: 100% !important;
    max-height: 100% !important;
    margin: 0 !important;
    border-radius: 0 !important;
    transform: none !important;
    overflow-y: auto !important;
    padding-top: var(--safe-area-top) !important;
    padding-bottom: calc(1rem + var(--safe-area-bottom)) !important;
  }
  
  /* Modal close buttons - bigger touch target */
  .modal-close,
  .close-btn,
  [class*="close-btn"],
  button[aria-label="Close"] {
    min-width: 44px !important;
    min-height: 44px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
}

/* =============================================================================
   TOUCH TARGET IMPROVEMENTS
   ============================================================================= */
@media (max-width: 768px) {
  /* All buttons get proper touch targets */
  button:not(.mobile-menu-toggle),
  .btn,
  [class*="-btn"]:not(.nav-btn),
  [class*="-button"],
  .chest-action,
  .skill-btn,
  .action-btn {
    min-height: var(--touch-target-min) !important;
  }
  
  /* Form inputs */
  input[type="text"],
  input[type="email"],
  input[type="password"],
  input[type="number"],
  input[type="search"],
  select,
  textarea {
    min-height: var(--touch-target-comfortable) !important;
    font-size: 16px !important; /* Prevent iOS zoom */
    padding: 0.75rem 1rem !important;
  }
  
  /* Checkboxes and radios */
  input[type="checkbox"],
  input[type="radio"] {
    min-width: 24px !important;
    min-height: 24px !important;
  }
}

/* =============================================================================
   TYPOGRAPHY IMPROVEMENTS
   ============================================================================= */
@media (max-width: 768px) {
  /* Minimum readable font sizes */
  body {
    font-size: var(--font-size-mobile-base) !important;
    line-height: 1.5 !important;
  }
  
  /* Fix tiny fonts */
  .chest-tier,
  .chest-meta,
  .stat-label,
  .tier-label,
  .item-stat,
  .reason-text,
  .advantage-tip {
    font-size: var(--font-size-mobile-xs) !important;
  }
  
  /* Headers responsive */
  h1 { font-size: 1.5rem !important; }
  h2 { font-size: 1.25rem !important; }
  h3 { font-size: 1.1rem !important; }
  h4 { font-size: 1rem !important; }
}

/* =============================================================================
   CRAFTING PAGE MOBILE
   ============================================================================= */
@media (max-width: 1024px) {
  .crafting-layout {
    grid-template-columns: 1fr !important;
    grid-template-rows: auto 1fr !important;
  }
  
  .crafting-inventory {
    border-right: none !important;
    border-bottom: 1px solid var(--border-color) !important;
    max-height: 50vh !important;
  }
  
  .crafting-forge {
    max-height: 50vh !important;
    overflow-y: auto !important;
  }
}

@media (max-width: 768px) {
  .crafting-page {
    height: auto !important;
    min-height: 100vh !important;
    overflow: visible !important;
  }
  
  .crafting-header {
    flex-direction: column !important;
    gap: 1rem !important;
    padding: 1rem !important;
  }
  
  .crafting-layout {
    display: flex !important;
    flex-direction: column !important;
  }
  
  .crafting-inventory,
  .crafting-forge {
    max-height: none !important;
    flex: none !important;
  }
  
  .forge-slot-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 0.75rem !important;
  }
  
  .forge-slot {
    min-height: 100px !important;
  }
  
  /* Inventory grid in crafting - smaller items */
  .crafting-inventory .inventory-grid {
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 6px !important;
  }
  
  .crafting-inventory .gear-card {
    min-height: 0 !important;
  }
  
  .crafting-inventory .gear-card.compact {
    aspect-ratio: 1 !important;
  }
  
  .crafting-inventory .gear-card .card-inner {
    padding: 4px !important;
  }
  
  .crafting-inventory .gear-card .gear-card-image,
  .crafting-inventory .gear-card .gc {
    width: 36px !important;
    height: 36px !important;
  }
  
  .crafting-inventory .gear-card .gear-card-name {
    font-size: 0.65rem !important;
    line-height: 1.1 !important;
    max-height: 2.2em !important;
    overflow: hidden !important;
  }
  
  .crafting-inventory .gear-card .quantity-badge {
    font-size: 0.6rem !important;
    padding: 1px 4px !important;
  }
}

/* =============================================================================
   FORGE CARD GAME MOBILE FIX
   ============================================================================= */
@media (max-width: 768px) {
  /* Make forge card game overlay full screen on mobile */
  .forge-card-game-overlay {
    padding: 0 !important;
    align-items: flex-start !important;
  }
  
  .forge-card-game-container {
    max-width: 100% !important;
    height: 100% !important;
    max-height: 100% !important;
  }
  
  .forge-card-game {
    border-radius: 0 !important;
    height: 100% !important;
    max-height: 100% !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    padding-top: max(1rem, env(safe-area-inset-top)) !important;
    padding-bottom: max(7rem, calc(env(safe-area-inset-bottom) + 6rem)) !important;
    display: flex !important;
    flex-direction: column !important;
  }
  
  /* Risk selection section should scroll */
  .forge-card-game .risk-selection {
    flex: 1 !important;
    overflow-y: auto !important;
    min-height: 0 !important;
    padding-bottom: 80px !important; /* Extra space for fixed button */
  }
  
  /* Ensure buttons are clickable on mobile */
  .forge-card-game .btn-proceed,
  .forge-card-game .btn-cancel,
  .forge-card-game .btn-confirm,
  .forge-card-game .risk-option,
  .forge-card-game .forge-close-btn {
    touch-action: manipulation !important;
    -webkit-tap-highlight-color: rgba(247, 160, 15, 0.2) !important;
    cursor: pointer !important;
    position: relative !important;
    z-index: 10 !important;
  }
  
  /* Make risk options smaller on mobile for better visibility */
  .forge-card-game .risk-options {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
    padding: 0.5rem !important;
  }
  
  .forge-card-game .risk-option {
    min-height: 70px !important;
    padding: 0.5rem !important;
    font-size: 0.75rem !important;
  }
  
  .forge-card-game .risk-option .risk-icon {
    font-size: 1.2rem !important;
  }
  
  .forge-card-game .risk-option .risk-name {
    font-size: 0.7rem !important;
  }
  
  .forge-card-game .risk-option .risk-desc {
    font-size: 0.6rem !important;
    display: none !important; /* Hide description on mobile to save space */
  }
  
  .forge-card-game .risk-option .risk-stats,
  .forge-card-game .risk-option .risk-reward,
  .forge-card-game .risk-option .risk-xp,
  .forge-card-game .risk-option .risk-cost {
    font-size: 0.6rem !important;
  }
  
  /* Make proceed button more prominent - ALWAYS VISIBLE */
  .forge-card-game .btn-proceed {
    min-height: 52px !important;
    width: 100% !important;
    font-size: 0.95rem !important;
    font-weight: 700 !important;
    padding: 1rem !important;
    border-radius: 12px !important;
    background: linear-gradient(135deg, #f7a00f, #f59e0b) !important;
    color: #000 !important;
    box-shadow: 0 4px 20px rgba(247, 160, 15, 0.5) !important;
  }
  
  /* Fix forge actions container - sticky at bottom, scrolls with content */
  .forge-card-game .forge-actions {
    position: sticky !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    padding: 1rem !important;
    padding-bottom: max(1.5rem, calc(env(safe-area-inset-bottom, 0px) + 1rem)) !important;
    background: linear-gradient(to top, rgba(10, 10, 15, 1) 0%, rgba(10, 10, 15, 0.98) 80%, transparent 100%) !important;
    z-index: 100 !important;
    margin-top: auto !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 0.5rem !important;
    box-sizing: border-box !important;
    width: 100% !important;
  }
  
  /* Ensure forge card game has proper flex layout */
  .forge-card-game {
    display: flex !important;
    flex-direction: column !important;
    min-height: 100% !important;
  }
  
  /* Risk selection should take available space */
  .forge-card-game .risk-selection {
    flex: 1 1 auto !important;
    overflow-y: auto !important;
    padding-bottom: 0 !important;
  }
}

@media (max-width: 480px) {
  .forge-slot-grid {
    grid-template-columns: 1fr !important;
  }
  
  .stat-pill {
    min-width: auto !important;
    padding: 0.4rem 0.75rem !important;
  }
  
  .crafting-inventory .inventory-grid {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 4px !important;
  }
  
  .crafting-inventory .gear-card .gear-card-image,
  .crafting-inventory .gear-card .gc {
    width: 32px !important;
    height: 32px !important;
  }
  
  .crafting-inventory .gear-card .gear-card-name {
    font-size: 0.6rem !important;
    display: none !important;
  }
}

/* =============================================================================
   CHESTS PAGE MOBILE
   ============================================================================= */
@media (max-width: 1024px) {
  .chests-columns {
    grid-template-columns: 1fr !important;
    gap: 1.5rem !important;
  }
}

@media (max-width: 768px) {
  .chest-list,
  #chest-grid,
  #catalog-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 1rem !important;
  }
  
  .chest-card {
    max-width: 100% !important;
    min-width: 0 !important;
  }
  
  .chest-visual {
    height: 140px !important;
  }
  
  .chest-buttons {
    flex-direction: column !important;
    gap: 0.5rem !important;
  }
  
  .chest-action {
    width: 100% !important;
    min-height: var(--touch-target-comfortable) !important;
    font-size: 0.95rem !important;
  }
  
  /* Pricing info panel */
  .pricing-info-panel {
    padding: 1rem !important;
  }
  
  .daily-opens-counter {
    padding: 1rem !important;
  }
}

/* =============================================================================
   BATTLE PAGE MOBILE
   ============================================================================= */
@media (max-width: 1024px) {
  .battle-layout {
    grid-template-columns: 1fr !important;
  }
  
  .battle-sidebar {
    display: none !important; /* Hide on tablet, access via button */
  }
}

@media (max-width: 768px) {
  /* Battle hub - stage selection */
  .battle-hub {
    padding: 0.5rem !important;
  }
  
  .battle-arena {
    padding: 0.75rem !important;
  }
  
  .combatant-card {
    padding: 0.75rem !important;
  }
  
  .combatant-stats {
    flex-direction: column !important;
    gap: 0.5rem !important;
  }
  
  .skill-bar {
    flex-wrap: wrap !important;
    gap: 0.5rem !important;
    justify-content: center !important;
  }
  
  .skill-btn {
    min-width: var(--touch-target-comfortable) !important;
    min-height: var(--touch-target-comfortable) !important;
    padding: 0.5rem !important;
  }
  
  /* Stage cards grid - SINGLE COLUMN for easier reading */
  .stage-grid,
  .bounty-grid {
    grid-template-columns: 1fr !important;
    gap: 0.75rem !important;
  }
  
  .stage-card,
  .bounty-card {
    padding: 1rem !important;
  }
  
  /* Stage card layout - make it horizontal-ish for better mobile UX */
  .stage-card {
    display: flex !important;
    flex-direction: column !important;
    gap: 0.75rem !important;
  }
  
  .stage-header {
    flex-wrap: wrap !important;
    gap: 0.5rem !important;
  }
  
  .stage-name {
    font-size: 1rem !important;
    flex: 1 1 100% !important;
  }
  
  .stage-info {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 0.5rem !important;
    justify-content: space-between !important;
  }
  
  .stage-mobs,
  .stage-rewards {
    font-size: 0.85rem !important;
  }
  
  /* Element cycle display */
  .advantage-cycle {
    font-size: 0.75rem !important;
    gap: 4px !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
  }
  
  .element-advantage-guide {
    padding: 12px 0 0 0 !important;
  }
  
  /* Pre-battle screen - make it full screen on mobile */
  .pre-battle-screen {
    padding: 0 !important;
  }
  
  .pre-battle-card {
    max-height: 100% !important;
    height: 100% !important;
    border-radius: 0 !important;
    padding-top: var(--mobile-header-height) !important;
    padding-bottom: calc(var(--mobile-bottom-total) + 1rem) !important;
  }
  
  /* Pre-battle stats */
  .pre-battle-content,
  .pb-content {
    padding: 0.75rem !important;
  }
  
  .pre-battle-stats,
  .pb-stats-grid {
    flex-direction: column !important;
    gap: 1rem !important;
    grid-template-columns: 1fr !important;
  }
  
  /* Hide VS arrows on mobile */
  .pb-vs-arrows {
    display: none !important;
  }
  
  /* Battle action buttons - full width */
  .pb-actions,
  .pre-battle-actions {
    flex-direction: column !important;
    gap: 0.5rem !important;
  }
  
  .pb-btn,
  .pre-battle-btn {
    width: 100% !important;
    min-height: var(--touch-target-comfortable) !important;
  }
  
  /* Equipment row - wrap if needed */
  .pb-equipment-row {
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 0.35rem !important;
  }
  
  .pb-equip-slot {
    width: 44px !important;
    height: 44px !important;
  }
  
  /* Top bar on battle page */
  .top-bar {
    flex-wrap: wrap !important;
    gap: 0.5rem !important;
    margin-bottom: 1rem !important;
  }
  
  .top-bar-line {
    font-size: 0.7rem !important;
    padding: 0.4rem 0.8rem !important;
  }
  
  /* Battle header stats */
  .battle-header-stats {
    flex-wrap: wrap !important;
    gap: 0.5rem !important;
    justify-content: center !important;
  }
  
  .stat-pill {
    font-size: 0.75rem !important;
    padding: 0.35rem 0.65rem !important;
  }
}

@media (max-width: 480px) {
  /* Even more compact on small phones */
  .stage-card {
    padding: 0.75rem !important;
  }
  
  .stage-name {
    font-size: 0.9rem !important;
  }
  
  .pb-equip-slot {
    width: 38px !important;
    height: 38px !important;
  }
  
  .pb-equip-img {
    width: 24px !important;
    height: 24px !important;
  }
  
  /* Element matchup section */
  .pb-element-matchup {
    padding: 0.75rem !important;
  }
  
  .pb-elem-icon {
    font-size: 1.25rem !important;
  }
  
  .pb-matchup-row {
    gap: 0.5rem !important;
  }
}

/* =============================================================================
   INVENTORY PAGE MOBILE
   ============================================================================= */
@media (max-width: 768px) {
  .inventory-layout {
    grid-template-columns: 1fr !important;
  }
  
  .inventory-grid,
  .gear-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 0.5rem !important;
  }
  
  .gear-card {
    padding: 0.5rem !important;
  }
  
  .gear-card-image {
    height: 80px !important;
  }
  
  /* Equipment slots */
  .loadout-grid {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 0.5rem !important;
  }
  
  .slot-card {
    min-height: 80px !important;
  }
  
  /* Filters */
  .inventory-filters {
    flex-wrap: wrap !important;
    gap: 0.5rem !important;
  }
  
  .inventory-filters select,
  .inventory-filters input {
    flex: 1 1 45% !important;
    min-width: 0 !important;
  }
}

@media (max-width: 480px) {
  .inventory-grid,
  .gear-grid {
    grid-template-columns: 1fr 1fr !important;
  }
  
  .loadout-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

/* =============================================================================
   MARKET PAGE MOBILE
   ============================================================================= */
@media (max-width: 768px) {
  .market-layout {
    grid-template-columns: 1fr !important;
    gap: 1rem !important;
  }
  
  .market-filters {
    flex-wrap: wrap !important;
    gap: 0.5rem !important;
  }
  
  .market-filters select,
  .market-filters input {
    flex: 1 1 45% !important;
    min-width: 0 !important;
  }
  
  /* Order book - horizontal scroll */
  .order-book {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }
  
  .order-book table {
    min-width: 500px !important;
  }
  
  /* Item listings */
  .market-item-grid {
    grid-template-columns: 1fr !important;
  }
  
  /* Market tabs */
  .market-tabs {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    gap: 0.25rem !important;
  }
  
  .market-tab {
    white-space: nowrap !important;
    padding: 0.6rem 0.8rem !important;
    font-size: 0.85rem !important;
  }
}

/* =============================================================================
   BUSINESSES PAGE MOBILE
   ============================================================================= */
@media (max-width: 768px) {
  .businesses-grid,
  .business-grid {
    grid-template-columns: 1fr !important;
    gap: 1rem !important;
  }
  
  .business-card {
    padding: 1rem !important;
  }
  
  .business-actions {
    flex-direction: column !important;
    gap: 0.5rem !important;
  }
  
  .business-actions button {
    width: 100% !important;
    min-height: var(--touch-target-comfortable) !important;
  }
  
  /* Resource display */
  .resource-bar,
  .resources-display {
    flex-wrap: wrap !important;
    gap: 0.5rem !important;
  }
}

/* =============================================================================
   GET VIP / GET TLRPG PAGES MOBILE
   ============================================================================= */
@media (max-width: 768px) {
  .vip-tiers-grid,
  .tier-grid,
  .vip-grid {
    grid-template-columns: 1fr !important;
    gap: 1rem !important;
  }
  
  .vip-tier-card,
  .tier-card {
    padding: 1.25rem !important;
  }
  
  /* Pricing table scrollable */
  .pricing-table-wrapper,
  .pricing-table {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }
  
  .pricing-table table {
    min-width: 600px !important;
  }
  
  /* VIP perks list */
  .vip-perks-list {
    gap: 0.5rem !important;
  }
  
  .vip-perk-item {
    font-size: 0.9rem !important;
    padding: 0.5rem !important;
  }
}

/* =============================================================================
   DASHBOARD PAGE MOBILE
   ============================================================================= */
@media (max-width: 768px) {
  .dashboard-grid {
    grid-template-columns: 1fr !important;
    gap: 1rem !important;
  }
  
  .dashboard-card,
  .stat-card {
    padding: 1rem !important;
  }
  
  .kingdom-panel {
    padding: 1rem !important;
  }
  
  .quick-actions {
    flex-wrap: wrap !important;
    gap: 0.5rem !important;
  }
  
  .quick-actions button {
    flex: 1 1 45% !important;
    min-width: 0 !important;
  }
}

/* =============================================================================
   LEADERBOARD PAGE MOBILE
   ============================================================================= */
@media (max-width: 768px) {
  .leaderboard-wrapper {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }
  
  .leaderboard-table {
    min-width: 400px !important;
  }
  
  .leaderboard-table td,
  .leaderboard-table th {
    padding: 0.75rem 0.5rem !important;
    font-size: 0.85rem !important;
  }
  
  /* Rank badges */
  .rank-badge {
    font-size: 0.9rem !important;
    padding: 0.25rem 0.5rem !important;
  }
}

/* =============================================================================
   REFERRALS PAGE MOBILE
   ============================================================================= */
@media (max-width: 768px) {
  .referral-link-box {
    flex-direction: column !important;
    gap: 0.5rem !important;
  }
  
  .referral-link-box input {
    width: 100% !important;
  }
  
  .referral-link-box button {
    width: 100% !important;
  }
  
  .referral-stats {
    grid-template-columns: 1fr 1fr !important;
    gap: 0.75rem !important;
  }
}

/* =============================================================================
   SCROLL BEHAVIOR & PERFORMANCE
   ============================================================================= */
@media (max-width: 768px) {
  /* Smooth scrolling containers */
  .scroll-container,
  .chest-list,
  .inventory-grid,
  [class*="-list"],
  [class*="-grid"] {
    -webkit-overflow-scrolling: touch !important;
  }
  
  /* Hide scrollbars on mobile but keep functionality */
  .chest-list::-webkit-scrollbar,
  .inventory-grid::-webkit-scrollbar,
  .top-status-content::-webkit-scrollbar {
    display: none !important;
  }
}

/* =============================================================================
   ANIMATION PERFORMANCE
   ============================================================================= */
@media (max-width: 768px) {
  /* Reduce transition times on mobile for snappier interactions */
  *:not(.glow-pulse):not(.loading-spinner):not([class*="loading"]):not([class*="spinner"]):not([class*="shimmer"]):not([class*="glow"]) {
    transition-duration: 0.2s !important;
  }
  /* Don't override animation durations - let them play naturally */
}

@media (prefers-reduced-motion: reduce) {
  * {
    animation: none !important;
    transition: none !important;
  }
}

/* =============================================================================
   iOS SAFE AREAS
   ============================================================================= */
@supports (padding: env(safe-area-inset-top)) {
  @media (max-width: 768px) {
    /* Top navigation respects notch */
    body.has-sidebar .sidebar {
      padding-top: var(--safe-area-top) !important;
      height: calc(60px + var(--safe-area-top)) !important;
    }
    
    /* Bottom status bar respects home indicator */
    .top-status-bar {
      padding-bottom: var(--safe-area-bottom) !important;
    }
    
    /* Content avoids both */
    body.has-sidebar .content,
    body.has-sidebar main.content {
      padding-left: var(--safe-area-left) !important;
      padding-right: var(--safe-area-right) !important;
    }
    
    /* Menu respects safe areas */
    body.has-sidebar .nav-menu {
      padding-top: calc(80px + var(--safe-area-top)) !important;
      padding-bottom: calc(1rem + var(--safe-area-bottom)) !important;
    }
  }
}

/* =============================================================================
   LANDSCAPE PHONE ADJUSTMENTS
   ============================================================================= */
@media (max-width: 900px) and (orientation: landscape) {
  /* Reduce nav height in landscape */
  body.has-sidebar .sidebar {
    height: 50px !important;
  }
  
  body.has-sidebar .content {
    padding-top: 60px !important;
  }
  
  /* Two-column layouts for wider screens */
  .chest-list,
  #chest-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  
  .inventory-grid,
  .gear-grid {
    grid-template-columns: repeat(3, 1fr) !important;
  }
  
  .stage-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

/* =============================================================================
   DARK MODE / OLED OPTIMIZATION
   ============================================================================= */
@media (prefers-color-scheme: dark) {
  @media (max-width: 768px) {
    /* Pure black backgrounds for OLED battery saving */
    body.tokenlords-dark {
      background: #000 !important;
    }
    
    .sidebar,
    .top-status-bar,
    .nav-menu {
      background: rgba(0, 0, 0, 0.98) !important;
    }
  }
}

/* =============================================================================
   CHAT PAGE MOBILE
   ============================================================================= */
@media (max-width: 768px) {
  .chat-container {
    height: calc(100vh - 150px) !important;
  }
  
  .chat-messages {
    padding: 0.75rem !important;
  }
  
  .chat-input-area {
    padding: 0.75rem !important;
    gap: 0.5rem !important;
  }
  
  .chat-input-area input {
    flex: 1 !important;
  }
  
  .chat-input-area button {
    min-width: var(--touch-target-min) !important;
  }
}

/* =============================================================================
   WITHDRAW PAGE MOBILE
   ============================================================================= */
@media (max-width: 768px) {
  .withdraw-form {
    padding: 1rem !important;
  }
  
  .withdraw-form input,
  .withdraw-form select {
    width: 100% !important;
  }
  
  .withdraw-summary {
    padding: 1rem !important;
  }
}

/* =============================================================================
   MOBILE TAP FEEDBACK & ANIMATIONS
   =============================================================================
   Since mobile doesn't have hover, we use :active states for touch feedback.
   Animations are faster to feel more responsive on touch devices.
   Disable idle/ambient animations to save battery.
   ============================================================================= */
@media (max-width: 768px) {
  /* Faster transitions for snappier feel */
  button,
  .btn,
  .btn-primary,
  .btn-secondary,
  .btn-destructive,
  [class*="-btn"],
  [class*="-button"],
  .nav-btn,
  .card-interactive,
  .listing-card,
  .gear-card,
  .adventure-card,
  .tier-card {
    transition-duration: 0.15s !important;
  }
  
  /* Disable hover effects on touch (they stick on mobile) */
  .hover-lift:hover,
  .hover-scale:hover,
  .hover-glow:hover,
  .card-interactive:hover,
  .btn-interactive:hover {
    transform: none !important;
    box-shadow: inherit !important;
  }
  
  /* Enable :active tap feedback instead */
  button:active,
  .btn:active,
  .btn-primary:active,
  .btn-secondary:active,
  .btn-destructive:active,
  [class*="-btn"]:active,
  .card-interactive:active,
  .listing-card:active,
  .gear-card:active,
  .adventure-card:active,
  .tier-card:active {
    transform: scale(0.97) !important;
    transition-duration: 0.1s !important;
  }
  
  /* Subtle active glow for primary actions */
  .btn-primary:active,
  .buy-btn:active,
  .cta-btn:active {
    box-shadow: 0 0 12px 2px hsla(38, 90%, 65%, 0.4) !important;
  }
  
  /* Disable battery-draining idle animations */
  .idle-breathe,
  .idle-breathe-slow,
  .animate-accent-glow-idle {
    animation: none !important;
  }
  
  /* Notification badge should still animate but slower */
  .notification-badge {
    animation-duration: 2s !important;
  }
  
  /* Keep entrance animations at reasonable speed */
  .animate-fade-in-up,
  .animate-fade-in-scale,
  .animate-fade-in,
  .animate-slide-up {
    animation-duration: 0.3s !important;
  }
  
  /* Disable shine sweep on mobile (performance) */
  .shine-sweep::after {
    display: none !important;
  }
  
  /* Remove nav slide on mobile (uses different layout) */
  .nav-btn:hover:not(.active) {
    transform: none !important;
  }
  
  .nav-btn:active:not(.active) {
    background: rgba(255, 255, 255, 0.1) !important;
  }
}

/* Extra small devices - even faster */
@media (max-width: 480px) {
  button,
  .btn,
  .card-interactive,
  .listing-card,
  .gear-card {
    transition-duration: 0.1s !important;
  }
}

/* =============================================================================
   ADMIN PAGE MOBILE
   ============================================================================= */
@media (max-width: 768px) {
  .admin-layout {
    grid-template-columns: 1fr !important;
  }
  
  .admin-sidebar {
    position: static !important;
    width: 100% !important;
  }
  
  .admin-content {
    padding: 1rem !important;
  }
  
  .admin-table-wrapper {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }
}
/* =============================================================================
   LOOT MODAL / CHEST RESULTS - MOBILE FIXES
   ============================================================================= */
@media (max-width: 600px) {
  .loot-overlay {
    padding: 0 !important;
    align-items: flex-start !important;
  }
  
  .loot-modal {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    height: 100% !important;
    max-height: 100% !important;
    margin: 0 !important;
    border-radius: 0 !important;
    padding: 1rem !important;
    padding-top: calc(1rem + env(safe-area-inset-top, 0px)) !important;
    padding-bottom: calc(5rem + env(safe-area-inset-bottom, 0px)) !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }
  
  /* CRITICAL: Make loot close button visible and clickable on mobile */
  .loot-close {
    position: fixed !important;
    top: calc(12px + env(safe-area-inset-top, 0px)) !important;
    right: 12px !important;
    width: 48px !important;
    height: 48px !important;
    min-width: 48px !important;
    min-height: 48px !important;
    font-size: 1.5rem !important;
    background: rgba(0, 0, 0, 0.7) !important;
    border: 2px solid rgba(255, 255, 255, 0.3) !important;
    border-radius: 50% !important;
    color: #fff !important;
    z-index: 10001 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    -webkit-tap-highlight-color: transparent !important;
  }
  
  .loot-close:active {
    background: rgba(255, 255, 255, 0.2) !important;
    transform: scale(0.95) !important;
  }
  
  .loot-header {
    padding-right: 60px !important;
  }
  
  .loot-gear-grid {
    grid-template-columns: 1fr !important;
    gap: 1rem !important;
  }
  
  .loot-gear-item {
    max-width: 280px !important;
    margin: 0 auto !important;
  }
}

/* =============================================================================
   KINGDOM UPGRADE MODAL - MOBILE FIXES
   ============================================================================= */
@media (max-width: 600px) {
  .business-modal-overlay {
    padding: 0 !important;
    align-items: flex-start !important;
  }
  
  .business-modal,
  .kingdom-upgrade-modal {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    height: 100% !important;
    max-height: 100% !important;
    margin: 0 !important;
    border-radius: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
  }
  
  .business-modal-header {
    flex-shrink: 0 !important;
    padding: calc(0.75rem + env(safe-area-inset-top, 0px)) 1rem 0.75rem 1rem !important;
    position: sticky !important;
    top: 0 !important;
    background: linear-gradient(180deg, rgba(17, 20, 30, 0.98), rgba(17, 20, 30, 0.95)) !important;
    z-index: 10 !important;
  }
  
  /* CRITICAL: Make close button visible and properly sized */
  .business-modal-close {
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    min-height: 44px !important;
    font-size: 1.25rem !important;
    background: rgba(255, 255, 255, 0.1) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    border-radius: 10px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    -webkit-tap-highlight-color: transparent !important;
    flex-shrink: 0 !important;
  }
  
  .business-modal-close:active {
    background: rgba(255, 255, 255, 0.2) !important;
  }
  
  .business-modal-title h2 {
    font-size: 1rem !important;
  }
  
  .business-modal-title .modal-icon {
    font-size: 1.5rem !important;
  }
  
  /* CRITICAL: Make content scrollable */
  .business-modal-content {
    flex: 1 !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    padding: 1rem !important;
    max-height: none !important;
  }
  
  /* Footer fixed at bottom - NOT sticky (sticky doesn't work in flex column) */
  .business-modal-footer {
    flex-shrink: 0 !important;
    padding: 1rem !important;
    padding-bottom: calc(1rem + env(safe-area-inset-bottom, 0px)) !important;
    position: relative !important;
    background: linear-gradient(0deg, rgba(17, 20, 30, 0.98), rgba(17, 20, 30, 0.95)) !important;
    border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
    margin-top: auto !important;
  }
  
  /* Status banner */
  .modal-status-banner {
    padding: 0.6rem 0.75rem !important;
    font-size: 0.8rem !important;
  }
  
  /* Stage requirement box */
  .modal-stage-requirement {
    margin-bottom: 1rem !important;
  }
  
  .stage-warning-box {
    padding: 0.75rem !important;
    font-size: 0.85rem !important;
  }
  
  /* Production info */
  .modal-production-info {
    padding: 0.75rem !important;
    margin-bottom: 1rem !important;
    background: rgba(255, 255, 255, 0.03) !important;
    border-radius: 10px !important;
  }
  
  .production-title {
    font-size: 0.85rem !important;
    margin-bottom: 0.5rem !important;
  }
  
  .production-row {
    padding: 0.35rem 0 !important;
    font-size: 0.8rem !important;
    flex-wrap: wrap !important;
    gap: 0.25rem !important;
  }
  
  /* Requirements section */
  .modal-requirements {
    padding: 0.75rem !important;
    background: rgba(255, 255, 255, 0.02) !important;
    border-radius: 10px !important;
  }
  
  .requirements-title {
    font-size: 0.85rem !important;
    margin-bottom: 0.5rem !important;
  }
  
  .requirement-item {
    padding: 0.5rem 0.75rem !important;
    font-size: 0.8rem !important;
    margin-bottom: 0.35rem !important;
  }
  
  .requirement-deficit {
    display: block !important;
    font-size: 0.7rem !important;
    margin-top: 0.15rem !important;
  }
  
  /* Upgrade button */
  .modal-btn {
    width: 100% !important;
    padding: 0.85rem !important;
    font-size: 0.95rem !important;
  }
}

/* =============================================================================
   BUSINESS LEVEL UNLOCK SCREEN - MOBILE FIXES
   Fix: Screen appearing as one giant orange button
   ============================================================================= */
@media (max-width: 600px) {
  /* Business unlock modal / level expand view */
  .business-level-expand,
  .business-unlock-modal,
  .business-level-modal {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    height: 100% !important;
    max-height: 100% !important;
    background: rgba(10, 12, 18, 0.98) !important;
    margin: 0 !important;
    border-radius: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    z-index: 10000 !important;
  }
  
  /* The orange "Unlock" button should NOT fill the screen */
  .business-unlock-btn,
  .btn-unlock,
  button[class*="unlock"] {
    width: auto !important;
    max-width: calc(100% - 2rem) !important;
    height: auto !important;
    min-height: 44px !important;
    max-height: 60px !important;
    padding: 0.75rem 1.5rem !important;
    margin: 1rem auto !important;
    display: inline-flex !important;
    position: relative !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    border-radius: 12px !important;
    font-size: 1rem !important;
  }
  
  /* CRITICAL: Fix .modal-btn.primary from becoming full-screen orange */
  .business-modal-footer .modal-btn,
  .business-modal-footer .modal-btn.primary,
  .business-modal-footer .modal-btn.secondary {
    position: relative !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 48px !important;
    max-height: 60px !important;
    padding: 0.85rem 1.5rem !important;
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.5rem !important;
    border-radius: 12px !important;
    font-size: 1rem !important;
    flex: none !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    transform: none !important;
    box-sizing: border-box !important;
  }
  
  /* Ensure the primary button has correct orange styling (not full screen) */
  .business-modal-footer .modal-btn.primary {
    background: linear-gradient(135deg, var(--tl-primary, #f7a00f), #e6920d) !important;
    border: none !important;
    color: #000 !important;
    box-shadow: 0 4px 15px rgba(247, 160, 15, 0.3) !important;
  }
  
  /* Ensure secondary button styling */  
  .business-modal-footer .modal-btn.secondary {
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    color: rgba(255, 255, 255, 0.8) !important;
  }
  
  /* Make footer a proper flex container */
  .business-modal-footer {
    display: flex !important;
    flex-direction: column !important;
    gap: 0.75rem !important;
    padding: 1rem !important;
    padding-bottom: calc(1rem + env(safe-area-inset-bottom, 0px)) !important;
    background: rgba(17, 20, 30, 0.98) !important;
    flex-shrink: 0 !important;
    position: relative !important;
    margin-top: auto !important;
  }
  
  /* Fix the expand button on businesses page */
  .business-expand-btn,
  .expand-btn,
  button.expand {
    width: auto !important;
    height: auto !important;
    position: relative !important;
    padding: 0.5rem 1rem !important;
  }
}

/* =============================================================================
   FORGE CARD GAME MODAL - MOBILE FIXES  
   ============================================================================= */
@media (max-width: 600px) {
  .forge-game-overlay {
    padding: 0 !important;
    align-items: flex-start !important;
  }
  
  .forge-game-modal,
  .forge-card-game {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    height: 100% !important;
    max-height: 100% !important;
    margin: 0 !important;
    border-radius: 0 !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    padding-top: env(safe-area-inset-top, 0px) !important;
    padding-bottom: calc(5rem + env(safe-area-inset-bottom, 0px)) !important;
  }
  
  /* CRITICAL: Make forge close button visible and clickable */
  .forge-close-btn,
  .forge-game-close {
    position: fixed !important;
    top: calc(12px + env(safe-area-inset-top, 0px)) !important;
    right: 12px !important;
    width: 48px !important;
    height: 48px !important;
    min-width: 48px !important;
    min-height: 48px !important;
    font-size: 1.25rem !important;
    background: rgba(0, 0, 0, 0.7) !important;
    border: 2px solid rgba(255, 255, 255, 0.3) !important;
    border-radius: 50% !important;
    color: #fff !important;
    z-index: 10001 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    -webkit-tap-highlight-color: transparent !important;
  }
  
  .forge-close-btn:active,
  .forge-game-close:active {
    background: rgba(255, 255, 255, 0.2) !important;
    transform: scale(0.95) !important;
  }
  
  .forge-header {
    padding-top: 3.5rem !important;
    padding-right: 1rem !important;
  }
  
  /* Risk options grid */
  .risk-options {
    grid-template-columns: 1fr 1fr !important;
    gap: 0.5rem !important;
  }
  
  .risk-option {
    padding: 0.6rem !important;
  }
  
  /* Card picking area */
  .card-arc {
    min-height: 160px !important;
    padding: 0.75rem 0 !important;
  }
  
  .forge-card {
    width: 55px !important;
    height: 75px !important;
    margin: 0 -6px !important;
  }
  
  /* Preview section */
  .forge-preview-section {
    flex-direction: column !important;
    gap: 0.75rem !important;
  }
  
  .preview-arrow {
    transform: rotate(90deg) !important;
  }
  
  /* Action buttons */
  .forge-actions {
    padding: 1rem !important;
  }
  
  .btn-proceed,
  .btn-confirm {
    width: 100% !important;
    padding: 0.85rem !important;
  }
}