/* =============================================================================
   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: 1024px) {
  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
   Now includes tablet (769px-1024px) for consistent experience
   ============================================================================= */
@media (max-width: 1024px) {
  /* -------------------------------------------------------------------------
     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: 38px !important;
    padding: 8px 16px !important;
    font-size: 0.875rem !important;
    border-radius: 0 !important;
    justify-content: flex-start !important;
    gap: 10px !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: 18px !important;
    height: 18px !important;
    opacity: 0.6 !important;
    flex-shrink: 0 !important;
  }
  
  body.has-sidebar .nav-label {
    font-size: 0.875rem !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: 38px !important;
    padding: 8px 16px !important;
    font-size: 0.875rem !important;
    border-radius: 0 !important;
    justify-content: flex-start !important;
    gap: 10px !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: 18px !important;
    height: 18px !important;
    flex-shrink: 0 !important;
  }
  
  body.has-sidebar .nav-btn-special .nav-label {
    font-size: 0.875rem !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 (1025px and above) */
@media (min-width: 1025px) {
  .mobile-menu-toggle {
    display: none !important;
  }
}

/* =============================================================================
   FULL-SCREEN MODALS ON MOBILE
   ============================================================================= */
@media (max-width: 601px) {
  /* All modals become full-screen EXCEPT business/kingdom upgrade modals */
  .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):not(.business-modal):not(.kingdom-upgrade-modal):not(.business-modal-overlay):not(.business-modal-header):not(.business-modal-content):not(.business-modal-footer):not(.business-modal-title):not(.business-modal-close):not([class*="business-modal"]):not(.wbl-modal):not(.wbl-modal-overlay):not(.wbl-modal-title):not(.wbl-modal-field):not(.wbl-modal-actions):not([class*="wb-rewards"]):not([class*="wbl-htp"]):not(.loadout-action-modal):not(.loadout-action-modal-header):not(.loadout-action-modal-body):not(.loadout-action-modal-actions):not([class*="loadout-action-modal"]):not(.cv2-modal):not(.cv2-modal-header):not(.cv2-modal-body):not(.cv2-modal-actions):not([class*="cv2-modal"]):not(.slot-chest-reward-modal):not(.slot-batch-results-modal):not(.whl-modal):not([class*="whl-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;
    transform: none !important;
    overflow-y: auto !important;
    padding-top: var(--safe-area-top) !important;
    padding-bottom: calc(1rem + var(--safe-area-bottom)) !important;
  }
  
  /* Chest reward modals: opt out of full-screen modal rule, let overlay flexbox center them */
  .slot-chest-reward-modal,
  .slot-batch-results-modal {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    width: 92% !important;
    max-width: 420px !important;
    height: auto !important;
    max-height: 70vh !important;
    overflow-y: auto !important;
    padding-top: 1.5rem !important;
    padding-bottom: 1.5rem !important;
    border-radius: 20px !important;
    margin-top: 0 !important;
    margin-left: auto !important;
    margin-right: auto !important;
    margin-bottom: 0 !important;
  }
  /* Also ensure the overlay itself is centred, not top-anchored */
  .slot-chest-reward-overlay {
    align-items: center !important;
    justify-content: center !important;
    padding-top: 0 !important;
  }

  /* Modal close buttons - bigger touch target and proper positioning */
  /* Exclude business modal close button which has its own styles */
  .modal-close:not(.business-modal-close),
  .close-btn,
  [class*="close-btn"]:not(.business-modal-close),
  button[aria-label="Close"]:not(.business-modal-close) {
    min-width: 44px !important;
    min-height: 44px !important;
    width: 44px !important;
    height: 44px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 1.5rem !important;
    z-index: 1000 !important;
    background: rgba(0, 0, 0, 0.6) !important;
    border: 2px solid rgba(255, 255, 255, 0.3) !important;
    border-radius: 50% !important;
    color: #fff !important;
    -webkit-tap-highlight-color: transparent !important;
  }
  
  /* Ensure close buttons inside positioned containers are visible */
  .modal-content .modal-close,
  .glassmorphic-card .modal-close,
  [class*="modal"] .modal-close {
    position: absolute !important;
    top: calc(0.5rem + env(safe-area-inset-top, 0px)) !important;
    right: 0.5rem !important;
  }

  /* -------------------------------------------------------------------------
     Quest Modal – mobile full-screen adjustments
     Prevent header / title / description from hiding behind the close button
     and the safe-area top bar.
     ------------------------------------------------------------------------- */

  /* The .modal wrapper (backdrop) must not flex-center on mobile;
     let the fixed-position child fill the screen naturally. */
  .quest-modal-backdrop,
  .modal:has(.quest-modal-content) {
    display: block !important;
    padding: 0 !important;
    overflow: hidden !important;
  }

  .quest-modal-content {
    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;
    box-sizing: border-box !important;
    /* Push content below close button (44px) + safe-area + breathing room */
    padding-top: calc(4rem + env(safe-area-inset-top, 0px)) !important;
    padding-left: 1rem !important;
    padding-right: 1rem !important;
    padding-bottom: calc(1.5rem + env(safe-area-inset-bottom, 0px)) !important;
    display: flex !important;
    flex-direction: column !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  /* Close button – always pinned at top-right inside the quest modal */
  .quest-modal-content > .modal-close {
    position: fixed !important;
    top: calc(0.75rem + env(safe-area-inset-top, 0px)) !important;
    right: 0.75rem !important;
    z-index: 1010 !important;
  }

  .quest-modal-header {
    margin-top: 0 !important;
    flex-shrink: 0;
  }

  .quest-modal-header h2 {
    font-size: 1.1rem !important;
    padding-right: 3rem !important; /* keep clear of the close button */
    word-wrap: break-word;
    overflow-wrap: break-word;
  }

  .quest-modal-icon {
    font-size: 1.5rem !important;
    flex-shrink: 0;
  }

  .quest-modal-description {
    font-size: 0.85rem !important;
    line-height: 1.5 !important;
  }

  .quest-modal-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
  }

  .quest-modal-rewards {
    padding: 12px !important;
  }

  .quest-reward-item {
    padding: 6px 0 !important;
    gap: 8px !important;
  }

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

  .quest-reward-value {
    font-size: 0.8rem !important;
    white-space: nowrap;
  }

  .quest-claim-btn {
    width: 100% !important;
    padding: 14px 24px !important;
    font-size: 1rem !important;
    flex-shrink: 0;
  }

  .quest-modal-actions {
    flex-shrink: 0;
  }

  .quest-modal-progress {
    flex-shrink: 0;
  }
}

/* =============================================================================
   TOUCH TARGET IMPROVEMENTS
   ============================================================================= */
@media (max-width: 1024px) {
  /* All buttons get proper touch targets */
  button:not(.mobile-menu-toggle):not(.th-nav-item):not(.th-bottom-btn):not(.th-hamburger):not(.th-sidebar__close-mobile):not(.th-sidebar__toggle):not(.th-mobile-bottom__energy-inline-btn):not(.th-header-icon):not(.th-beta-ribbon):not(.header-discord-verify-btn):not(.th-sidebar__cur-btn):not(.th-subhdr2__refill):not(.th-subhdr2__toggle):not(.th-sidebar__cur-topup):not(.th-sidebar__cur-buy-btn):not(.th-sidebar__view-resources):not(.th-phase-timer-mini),
  .btn,
  [class*="-btn"]:not(.nav-btn):not(.th-bottom-btn):not([class*="th-bottom"]):not(.th-nav-item):not(.th-mobile-bottom__energy-inline-btn):not(.th-header-icon):not(.header-discord-verify-btn):not(.th-sidebar__cur-btn):not(.th-sidebar__cur-buy-btn),
  [class*="-button"],
  .chest-action,
  .skill-btn,
  .action-btn {
    min-height: var(--touch-target-min) !important;
  }

  /* Discord & Beta: proper height on non-battle pages */
  body:not(:has(.b4-root)) .header-discord-verify-btn,
  body:not(:has(.b4-root)) .th-beta-ribbon {
    min-height: 36px !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: 1024px) {
  /* 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: 1024px) {
  .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: 1024px) {
  /* 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: 1024px) {
  .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: 1024px) {
  /* 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: 1024px) {
  .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: 1024px) {
  .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: 1024px) {
  .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: 1024px) {
  .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: 1024px) {
  .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: 1024px) {
  .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: 1024px) {
  .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: 1024px) {
  /* 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: 1024px) {
  /* 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: 1024px) {
    /* 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: 1024px) {
    /* 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: 1024px) {
  .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: 1024px) {
  .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: 1024px) {
  /* 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: 1024px) {
  .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: 601px) {
  .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: absolute !important;
    top: calc(60px + env(safe-area-inset-top, 0px)) !important;
    right: 8px !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;
  }
  
  /* Preview modal close button - also move down past header */
  .preview-close {
    position: absolute !important;
    top: calc(60px + env(safe-area-inset-top, 0px)) !important;
    right: 8px !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;
  }
}

/* =============================================================================
   BUSINESS & KINGDOM MODALS - MOBILE STYLES
   NOTE: All business/kingdom modal mobile styles are now in businesses.css
   This section intentionally left empty to avoid conflicts
   ============================================================================= */

/* =============================================================================
   FORGE CARD GAME MODAL - MOBILE FIXES  
   ============================================================================= */
@media (max-width: 601px) {
  .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;
  }
}
/* Fix sidebar Buy TLRPG / Buy Bronze button height on mobile */
@media (max-width: 768px) {
}