/**
 * Mobile Messages & Announcements Fix
 * - Prevents overlapping messages/results/notifications
 * - Ensures proper stacking and visibility
 */

@media (max-width: 900px) and (orientation: landscape) {
  
  /* ===========================
     MESSAGE & ROUND RESULT POSITIONING
     Stack at top to avoid overlapping
     =========================== */
  
  #message {
    position: fixed !important;
    top: 50px !important;
    left: 50% !important;
    right: auto !important;
    bottom: auto !important;
    transform: translateX(-50%) !important;
    width: auto !important;
    max-width: 280px !important;
    z-index: 9999 !important;
    padding: 10px 16px !important;
    font-size: 0.85rem !important;
    text-align: center !important;
    pointer-events: none !important;
  }
  
  #round-result {
    position: fixed !important;
    top: 85px !important;
    left: 50% !important;
    right: auto !important;
    bottom: auto !important;
    transform: translateX(-50%) !important;
    width: auto !important;
    max-width: 320px !important;
    z-index: 9998 !important;
    padding: 12px 20px !important;
    font-size: 0.95rem !important;
    text-align: center !important;
    pointer-events: none !important;
  }
  
  /* Ensure messages don't interfere with notifications */
  #message:empty,
  #round-result:empty {
    display: none !important;
  }
  
  /* ===========================
     NOTIFICATION CONTAINER - Top Right
     =========================== */
  .notification-container {
    top: 50px !important;
    right: 8px !important;
    left: auto !important;
    max-width: 240px !important;
    gap: 8px !important;
  }
  
  .notification {
    padding: 10px 12px !important;
    min-height: 48px !important;
    font-size: 0.8rem !important;
  }
  
  .notification-title {
    font-size: 0.85rem !important;
  }
  
  .notification-message {
    font-size: 0.75rem !important;
  }
  
  .notification-icon {
    font-size: 1.2rem !important;
  }
  
  /* ===========================
     SMALL SCREENS - More compact
     =========================== */
  @media (max-width: 568px) {
    #message {
      top: 42px !important;
      max-width: 200px !important;
      font-size: 0.75rem !important;
      padding: 8px 12px !important;
    }
    
    #round-result {
      top: 72px !important;
      max-width: 240px !important;
      font-size: 0.85rem !important;
      padding: 10px 16px !important;
    }
    
    .notification-container {
      top: 42px !important;
      right: 6px !important;
      max-width: 180px !important;
    }
    
    .notification {
      padding: 8px 10px !important;
      min-height: 42px !important;
    }
  }
}

/* Desktop - original positioning */
@media (min-width: 901px) {
  #message,
  #round-result {
    position: relative !important;
  }
}