/**
 * Mobile Fixes for Matrix Spins Casino
 * Dark theme: #020c02 background, #00ff41 accent, #fbbf24/#d4af37 gold
 * Targets mobile devices ≤640px and compact headers at ≤480px
 * Fixes overlapping positioned elements from 21+ feature modules
 */

/* ============================================================================
   MOBILE BREAKPOINT: ≤640px
   ============================================================================ */

@media (max-width: 640px) {

  /* --------------------------------------------------------------------------
     1. FAB CLEANUP - Hide individual FABs that mobile-fab-dock.js will handle
     -------------------------------------------------------------------------- */

  #referralFab,
  #tournamentFab,
  #premiumTournamentBtn,
  .support-chat-btn {
    display: none !important;
  }

  /* --------------------------------------------------------------------------
     2. MODAL FIXES - Full-screen modals on mobile
     -------------------------------------------------------------------------- */

  [id*="Modal"],
  [id*="modal"],
  [class*="modal"],
  .feature-popup {
    width: 100% !important;
    max-width: 100% !important;
    border-radius: 0 !important;
    margin: 0 !important;
    left: 0 !important;
    right: 0 !important;
    top: 0 !important;
    bottom: 0 !important;
    max-height: 100vh !important;
    padding-top: env(safe-area-inset-top) !important;
    padding-bottom: env(safe-area-inset-bottom) !important;
  }

  /* Ensure modal content is scrollable if needed */
  [id*="Modal"] > *,
  [id*="modal"] > *,
  [class*="modal"] > *,
  .feature-popup > * {
    max-height: calc(100vh - env(safe-area-inset-top) - env(safe-area-inset-bottom)) !important;
    overflow-y: auto !important;
  }

  /* Close buttons should be accessible */
  [id*="Modal"] [class*="close"],
  [id*="modal"] [class*="close"],
  [class*="modal"] [class*="close"],
  .feature-popup [class*="close"] {
    min-width: 44px;
    min-height: 44px;
  }

  /* --------------------------------------------------------------------------
     3. BOTTOM NAV SPACING - Shift positioned elements above bottom nav
     -------------------------------------------------------------------------- */

  /* Mobile bottom nav takes 60px - elements need to shift up */
  #liveWinsTicker,
  #live-wins-ticker,
  [class*="live-wins"] {
    bottom: 70px !important;
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    margin: 0 !important;
    border-radius: 0 !important;
  }

  /* Slot race timer bar positioning */
  #slotRaceTimer,
  [class*="slot-race"],
  [class*="race-timer"],
  [id*="RaceTimer"] {
    bottom: 70px !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    margin: 0 !important;
    border-radius: 0 !important;
  }

  /* General rule: anything positioned at bottom:0 that's not the nav */
  [style*="bottom: 0"],
  [style*="bottom:0"] {
    bottom: 70px !important;
  }

  /* Except the mobile-bottom-nav itself */
  #mobile-bottom-nav,
  [class*="mobile-bottom-nav"],
  [class*="bottom-nav"],
  nav[class*="mobile"] {
    bottom: 0 !important;
    padding-bottom: env(safe-area-inset-bottom) !important;
  }

  /* --------------------------------------------------------------------------
     4. HEADER COMPACTION (≤640px) - Less critical buttons hidden, balance compact
     -------------------------------------------------------------------------- */

  header,
  [class*="header"],
  [id*="Header"],
  nav[class*="top"] {
    padding-top: env(safe-area-inset-top) !important;
  }

  /* Hide less essential header controls on mobile */
  #settingsBtn,
  #soundToggle,
  [class*="sound-toggle"],
  [id*="soundBtn"],
  [class*="header-settings"],
  [class*="header-right"] > button:nth-child(3),
  [class*="header-right"] > button:nth-child(4) {
    display: none !important;
  }

  /* Compact balance display */
  [class*="balance"],
  [id*="balance"],
  [class*="player-balance"],
  [id*="playerBalance"] {
    font-size: 0.875rem !important;
    padding: 4px 8px !important;
  }

  /* Hamburger menu always accessible */
  [class*="hamburger"],
  [class*="menu-toggle"],
  [id*="menuToggle"],
  [id*="hamburger"] {
    display: block !important;
    min-width: 44px !important;
    min-height: 44px !important;
    position: relative !important;
    z-index: 1000 !important;
  }

  /* --------------------------------------------------------------------------
     5. GAME GRID - 2 columns on mobile, smaller cards
     -------------------------------------------------------------------------- */

  [class*="game-grid"],
  [class*="games-container"],
  [id*="gameGrid"],
  [class*="slot-games"],
  .grid,
  .games {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
    padding: 8px !important;
  }

  /* Game cards */
  [class*="game-card"],
  [class*="slot-card"],
  [id*="gameCard"],
  .game-item,
  [class*="game-item"] {
    border-radius: 8px !important;
    padding: 8px !important;
    overflow: hidden !important;
    aspect-ratio: 1 !important;
  }

  /* Game card text */
  [class*="game-card"] [class*="title"],
  [class*="slot-card"] [class*="title"],
  [class*="game-card"] h3,
  [class*="slot-card"] h3,
  [class*="game-item"] h3 {
    font-size: 0.75rem !important;
    margin: 4px 0 !important;
  }

  [class*="game-card"] [class*="label"],
  [class*="slot-card"] [class*="label"],
  [class*="game-item"] p {
    font-size: 0.625rem !important;
  }

  /* --------------------------------------------------------------------------
     6. TOUCH IMPROVEMENTS - 44px minimum tap targets, no hovers on touch
     -------------------------------------------------------------------------- */

  button,
  a,
  [role="button"],
  input[type="button"],
  input[type="submit"],
  [class*="btn"],
  [class*="button"] {
    min-width: 44px !important;
    min-height: 44px !important;
    padding: 8px 12px !important;
  }

  /* Remove hover effects on touch devices */
  @media (hover: none) and (pointer: coarse) {
    button:hover,
    a:hover,
    [role="button"]:hover,
    [class*="btn"]:hover,
    [class*="button"]:hover {
      background-color: inherit !important;
      transform: none !important;
      box-shadow: none !important;
    }
  }

  /* Add :active states for touch feedback */
  button:active,
  a:active,
  [role="button"]:active,
  [class*="btn"]:active,
  [class*="button"]:active {
    opacity: 0.8 !important;
    transform: scale(0.98) !important;
  }

  /* --------------------------------------------------------------------------
     7. SLOT MACHINE VIEW - Full-width reels, compact controls
     -------------------------------------------------------------------------- */

  [class*="slot-machine"],
  [id*="slotMachine"],
  [class*="slot-container"],
  [id*="slotContainer"],
  [class*="reel-container"],
  [id*="reelContainer"] {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  /* Slot reels - full width */
  [class*="reel"],
  [id*="reel"],
  [class*="reel-set"],
  [id*="reelSet"] {
    width: 100% !important;
    display: flex !important;
    justify-content: center !important;
    gap: 4px !important;
  }

  [class*="single-reel"],
  [id*="singleReel"],
  .reel {
    flex: 1 !important;
    min-width: 60px !important;
    max-width: calc(33.33% - 3px) !important;
    aspect-ratio: 1 !important;
  }

  /* Compact controls below reels */
  [class*="slot-controls"],
  [id*="slotControls"],
  [class*="game-controls"],
  [id*="gameControls"] {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    padding: 8px !important;
    width: 100% !important;
  }

  /* Spin button - always large and visible */
  #spinBtn,
  #spin-button,
  [class*="spin-button"],
  [id*="spinButton"],
  button[class*="spin"] {
    width: 100% !important;
    min-height: 50px !important;
    font-size: 1rem !important;
    padding: 12px !important;
    background-color: #00ff41 !important;
    color: #020c02 !important;
    border: none !important;
    border-radius: 4px !important;
    font-weight: bold !important;
    margin-top: 8px !important;
  }

  /* Bet controls in single row */
  [class*="bet-controls"],
  [id*="betControls"],
  [class*="controls-row"] {
    display: flex !important;
    gap: 4px !important;
    width: 100% !important;
  }

  [class*="bet-controls"] button,
  [id*="betControls"] button,
  [class*="controls-row"] button {
    flex: 1 !important;
    min-height: 40px !important;
    font-size: 0.875rem !important;
  }

  /* Display values (bet amount, win amount) */
  [class*="bet-amount"],
  [class*="win-amount"],
  [class*="stake"],
  [id*="betAmount"],
  [id*="winAmount"] {
    font-size: 0.875rem !important;
    text-align: center !important;
  }

  /* --------------------------------------------------------------------------
     8. NOTIFICATION/TOAST POSITIONING - Above bottom nav
     -------------------------------------------------------------------------- */

  [class*="toast"],
  [class*="notification"],
  [id*="notification"],
  [class*="alert"],
  .toast,
  .notification {
    bottom: 80px !important;
    left: 8px !important;
    right: 8px !important;
    max-width: calc(100% - 16px) !important;
    margin: 0 !important;
    border-radius: 4px !important;
    z-index: 999 !important;
  }

  /* Social proof / live wins feed positioning */
  [class*="social-proof"],
  [id*="socialProof"],
  [class*="live-feed"],
  [id*="liveFeed"],
  [class*="wins-feed"] {
    position: fixed !important;
    bottom: 80px !important;
    right: 8px !important;
    max-width: 280px !important;
    max-height: 300px !important;
    overflow-y: auto !important;
    z-index: 998 !important;
  }

  /* Individual feed items - scrollable */
  [class*="social-proof"] > div,
  [class*="live-feed"] > div,
  [class*="wins-feed"] > div {
    margin-bottom: 4px !important;
    padding: 6px !important;
    border-radius: 4px !important;
    font-size: 0.75rem !important;
  }

  /* --------------------------------------------------------------------------
     9. SAFE AREAS - Notch support for modern devices
     -------------------------------------------------------------------------- */

  /* Bottom navigation safe area */
  [class*="bottom-nav"],
  nav[class*="mobile"],
  #mobile-bottom-nav {
    padding-bottom: env(safe-area-inset-bottom) !important;
    padding-left: env(safe-area-inset-left) !important;
    padding-right: env(safe-area-inset-right) !important;
  }

  /* Header safe area */
  header,
  [class*="header"],
  [id*="Header"] {
    padding-top: env(safe-area-inset-top) !important;
    padding-left: env(safe-area-inset-left) !important;
    padding-right: env(safe-area-inset-right) !important;
  }

  /* Side panels safe area */
  aside,
  [class*="sidebar"],
  [class*="panel-left"],
  [class*="panel-right"] {
    padding-left: env(safe-area-inset-left) !important;
    padding-right: env(safe-area-inset-right) !important;
  }

  /* Main content safe area */
  main,
  [class*="main-content"],
  [id*="mainContent"],
  [class*="content"] {
    padding-left: env(safe-area-inset-left) !important;
    padding-right: env(safe-area-inset-right) !important;
    padding-bottom: max(8px, env(safe-area-inset-bottom)) !important;
  }

}

/* ============================================================================
   COMPACT HEADER BREAKPOINT: ≤480px
   ============================================================================ */

@media (max-width: 480px) {

  /* Reduce header size further */
  header,
  [class*="header"],
  [id*="Header"] {
    min-height: 48px !important;
  }

  /* Hide logo text, keep icon only */
  [class*="logo-text"],
  [id*="logoText"],
  .logo-text {
    display: none !important;
  }

  /* Balance display ultra-compact */
  [class*="balance"],
  [id*="balance"],
  [class*="player-balance"],
  [id*="playerBalance"] {
    font-size: 0.75rem !important;
    padding: 2px 4px !important;
  }

  /* Game grid - ensure 2 columns fit */
  [class*="game-grid"],
  [class*="games-container"],
  [id*="gameGrid"],
  .grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 6px !important;
    padding: 6px !important;
  }

  /* Slot machine - tighter spacing */
  [class*="slot-container"],
  [id*="slotContainer"] {
    padding: 4px !important;
  }

  [class*="reel"] {
    gap: 2px !important;
  }

  [class*="single-reel"],
  .reel {
    min-width: 50px !important;
  }

  /* Stack controls vertically for ultra-compact layout */
  [class*="slot-controls"],
  [class*="game-controls"] {
    gap: 6px !important;
    padding: 6px !important;
  }

  /* Smaller spin button font */
  button[class*="spin"],
  #spinBtn {
    font-size: 0.95rem !important;
    min-height: 44px !important;
    padding: 10px !important;
  }

  /* Toast positioning even higher on ultra-compact screens */
  [class*="toast"],
  [class*="notification"],
  .notification {
    bottom: 70px !important;
  }

  /* Disable shadow effects to save space visually */
  [class*="game-card"],
  [class*="slot-card"],
  button,
  [class*="card"] {
    box-shadow: none !important;
  }

}

/* ============================================================================
   LANDSCAPE ORIENTATION FIXES (max-height: 500px)
   ============================================================================ */

@media (max-height: 500px) {

  /* Hide header in extreme landscape */
  header,
  [class*="header"],
  nav[class*="top"] {
    min-height: auto !important;
  }

  /* Reduce game card heights in landscape */
  [class*="game-card"],
  [class*="slot-card"] {
    aspect-ratio: auto !important;
    max-height: 120px !important;
  }

  /* Compact slot machine in landscape */
  [class*="single-reel"],
  .reel {
    max-height: 100px !important;
  }

}

/* ============================================================================
   ACCESSIBILITY & GENERAL MOBILE IMPROVEMENTS
   ============================================================================ */

@media (max-width: 640px) {

  /* Ensure text is readable */
  * {
    -webkit-text-size-adjust: 100% !important;
  }

  /* Prevent zoom on input focus */
  input,
  select,
  textarea {
    font-size: 16px !important;
  }

  /* Remove horizontal scrolling */
  body,
  html {
    overflow-x: hidden !important;
    width: 100% !important;
  }

  /* Smooth scrolling for better UX */
  html {
    scroll-behavior: smooth !important;
  }

  /* Images responsive */
  img {
    max-width: 100% !important;
    height: auto !important;
    display: block !important;
  }

  /* Tables responsive */
  table {
    width: 100% !important;
    border-collapse: collapse !important;
  }

  table td,
  table th {
    padding: 8px 4px !important;
    font-size: 0.875rem !important;
  }

}