/**
 * Mobile Inline Status - Move notifications to dealer area
 * - Removes popup notifications
 * - Shows status inline next to dealer
 * - Cleaner mobile experience
 */

@media (max-width: 900px) and (orientation: landscape) {
  
  /* ===========================
     HIDE LEGACY POPUPS
     =========================== */
  
  #message.legacy-message,
  #round-result.legacy-result {
    display: none !important;
  }
  
  /* ===========================
     DEALER INFO ROW - Status inline
     =========================== */
  
  .dealer-info-row {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    margin-top: 3px !important;
    flex-wrap: wrap !important;
  }
  
  #dealer-value {
    background: rgba(0, 0, 0, 0.8) !important;
    color: #ffd700 !important;
    padding: 2px 6px !important;
    border-radius: 4px !important;
    font-size: 0.65rem !important;
    font-weight: bold !important;
    border: 1px solid rgba(255, 215, 0, 0.3) !important;
    min-width: 50px !important;
    text-align: center !important;
  }
  
  #game-status {
    background: rgba(0, 0, 0, 0.8) !important;
    color: #fff !important;
    padding: 2px 6px !important;
    border-radius: 4px !important;
    font-size: 0.65rem !important;
    font-weight: 600 !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    max-width: 150px !important;
    text-align: center !important;
    transition: all 0.2s ease !important;
  }
  
  /* Status color variations */
  #game-status.status-betting {
    border-color: rgba(255, 215, 0, 0.5) !important;
    color: #ffd700 !important;
  }
  
  #game-status.status-playing {
    border-color: rgba(76, 175, 80, 0.5) !important;
    color: #4CAF50 !important;
  }
  
  #game-status.status-waiting {
    border-color: rgba(33, 150, 243, 0.5) !important;
    color: #2196F3 !important;
  }
  
  #game-status.status-dealer {
    border-color: rgba(255, 152, 0, 0.5) !important;
    color: #FF9800 !important;
  }
  
  /* Empty status - hide */
  #game-status:empty {
    display: none !important;
  }
  
  /* ===========================
     SMALL SCREENS - More compact
     =========================== */
  
  @media (max-width: 568px) {
    .dealer-info-row {
      gap: 8px !important;
    }
    
    #dealer-value,
    #game-status {
      font-size: 0.7rem !important;
      padding: 3px 8px !important;
    }
    
    #game-status {
      max-width: 150px !important;
    }
  }
}

/* Desktop - keep legacy popups */
@media (min-width: 901px) {
  .dealer-info-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    margin-top: 10px;
  }
  
  #game-status {
    display: none; /* Desktop uses legacy popups */
  }
}